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

.jobs-page {
  &__content {
    margin-left: 2rem;
    margin-right: var(--chat-width, 4.0rem);
    flex: 1;
    padding: 0.12rem 0.18rem;
    height: var(--app-height, 100vh);
    box-sizing: border-box;
    overflow: hidden;
    background: $bg-main;
    display: flex;
    flex-direction: column;
    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 {
    background: $bg-white;
    border-radius: 0.12rem;
    padding: 0.14rem 0.18rem;
    margin-bottom: 0.2rem;
  }

  // 筛选条件
  &__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: $bg-main;
    border: 1px solid #E8E8E8;
    border-radius: 0.2rem;
    padding: 0.05rem 0.14rem;
    color: $text-dark;
    font-size: 0.12rem;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    position: relative;
    height: 0.234rem;

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

  // 工作类型下拉菜单
  &__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: 1px solid #E8E8E8;
    border-radius: 0.2rem;
    padding: 0.07rem 0.14rem;
    min-width: 1.6rem;
    transition: border-color 0.2s ease;

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

  &__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;
    }
  }

  // 职位列表
  &__list {
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
    flex: 1;
    overflow-y: auto;
    padding-bottom: 0.2rem;
  }

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

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

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

  &__job-left {
    flex: 1;
    min-width: 0;
  }

  &__job-icon {
    width: 0.54rem;
    height: 0.54rem;
    border-radius: 0.1rem;
    background: $theme-color;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 1px solid #E8E8E8;
  }

  &__company-svg {
    width: 0.24rem;
    height: 0.24rem;
    color: $accent;
  }

  &__job-info {
    flex: 1;
    min-width: 0;
  }

  &__job-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  &__job-name {
    font-size: 0.15rem;
    font-weight: 600;
    color: $text-dark;
    line-height: 1.4;
  }

  &__job-more {
    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: $text-dark;
      background: $bg-main;
    }
  }

  &__more-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-meta {
    font-size: 0.14rem;
    color: $text-middle;
    margin-top: 0.04rem;
    line-height: 1.4;
  }

  &__job-dot {
    margin: 0 0.04rem;
    color: #D9D9D9;
  }

  &__job-tip {
    font-size: 0.11rem;
    color: $accent-hover;
    background: $theme-color;
    border-radius: 0.04rem;
    padding: 0.05rem 0.1rem;
    margin-top: 0.1rem;
    display: inline-flex;
    align-items: center;
    gap: 0.04rem;
    border: 1px solid rgba(79, 194, 201, 0.2);
  }

  &__tip-svg {
    width: 0.12rem;
    height: 0.12rem;
    flex-shrink: 0;
  }

  &__job-tags {
    display: flex;
    gap: 0.08rem;
    margin-top: 0.1rem;
    flex-wrap: wrap;
  }

  &__job-tag {
    font-size: 0.11rem;
    color: #888;
    background: $bg-main;
    border-radius: 0.04rem;
    padding: 0.03rem 0.1rem;
    transition: all 0.2s;

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

  // 底部操作栏
  &__job-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 0.14rem;
    position: relative;
  }

  &__job-action-left {
    display: flex;
    align-items: center;
    gap: 0.08rem;
  }

  &__action-icon-btn {
    width: 0.28rem;
    height: 0.28rem;
    border-radius: 50%;
    border: none;
    background: $bg-main;
    color: $text-light;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;

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

    &--liked {
      background: #FFF0ED;
      color: $danger;

      &:hover {
        background: #FFE4DE;
      }
    }
  }

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

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

  &__job-helper {
    font-size: 0.12rem;
    color: $text-light;
    cursor: pointer;
    transition: color 0.2s;
    display: flex;
    align-items: center;
    gap: 0.04rem;
    background: $bg-main;
    border: 1px solid #E8E8E8;
    padding: 0.04rem 0.08rem;
    border-radius: 0.14rem;

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

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

  &__job-apply-btn {
    background: $btn-dark;
    border: 0.02rem solid $btn-dark;
    border-radius: 0.2rem;
    padding: 0.04rem 0.2rem;
    color: $bg-white;
    font-size: 0.12rem;
    cursor: pointer;
    transition: all 0.2s;
    font-weight: 500;

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

    &--active {
      background: $accent;
      border-color: $accent;
      color: $bg-white;

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

  // 弹出菜单
  &__job-popup {
    position: absolute;
    right: 0.26rem;
    top: -0.64rem;
    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.1rem;
    text-align: center;
    flex-shrink: 0;
    border-radius: 0.12rem;
    padding: 0.14rem 0.1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.02rem;
    transition: all 0.25s ease;

    &--high {
      background: linear-gradient(135deg, $theme-color 0%, rgba(79, 194, 201, 0.15) 100%);
      border: 1px solid rgba(79, 194, 201, 0.25);
    }

    &--low {
      background: $bg-main;
      border: 1px solid #E8E8E8;
    }
  }

  &__match-ring {
    position: relative;
    width: 0.64rem;
    height: 0.64rem;
    display: flex;
    align-items: center;
    justify-content: center;
  }

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

  &__match-score {
    font-size: 0.18rem;
    font-weight: 700;
    color: $text-dark;
    line-height: 1;
    position: relative;
    z-index: 1;
  }

  &__match-label {
    font-size: 0.1rem;
    color: $text-light;
    margin-top: 0.04rem;
  }

  &__match-level {
    font-size: 0.1rem;
    color: $text-light;
    margin-top: 0.01rem;
  }

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

  &__lock-icon {
    width: 0.32rem;
    height: 0.32rem;
    color: $text-light;
    margin-bottom: 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); }
  }

  // 高匹配度特殊样式
  &__job-match--high &__match-score {
    color: $accent-hover;
  }

  &__job-match--high &__match-level {
    color: $accent;
    font-weight: 500;
  }

  // ==================== AI助手投递提醒弹窗 ====================

  // 遮罩层
  &__agent-remind-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;
  }

  // 弹窗主体
  &__agent-remind-dialog {
    background: $bg-white;
    border-radius: 0.12rem;
    padding: 0.32rem 0.36rem 0.24rem;
    min-width: 3.2rem;
    text-align: center;
  }

  // 提示文字
  &__agent-remind-text {
    font-size: 0.15rem;
    color: $text-dark;
    font-weight: 500;
    margin-bottom: 0.28rem;
    line-height: 1.5;
  }

  // 按钮区域
  &__agent-remind-actions {
    display: flex;
    gap: 0.16rem;
  }

  // 按钮通用
  &__agent-remind-btn {
    flex: 1;
    padding: 0.1rem 0;
    border-radius: 0.08rem;
    font-size: 0.14rem;
    font-weight: 500;
    cursor: pointer;
    border: none;
    transition: opacity 0.2s;

    &:hover {
      opacity: 0.85;
    }

    // 灰色按钮 — 直接投
    &--secondary {
      background: $bg-main;
      color: $text-middle;
    }

    // 主题色按钮 — 去AI助手
    &--primary {
      background: $btn-dark;
      color: $bg-white;
    }
  }
}

// ==================== 不感兴趣反馈弹窗 ====================
.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 {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    margin-bottom: 0.16rem;
  }

  // 单个选项行
  &__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;
      }
    }
  }
}