@use '../variables' as *;
@use 'sass:color';

// ==================== 个人资料内联编辑组件 ====================

// 内联编辑容器 — 直接嵌入页面卡片中
.profile-edit-inline {
  font-size: 14px;
  line-height: 1.5;
  background: #F7F7F7;
  border-radius: 0.12rem;
  padding: 0.16rem;
  box-sizing: border-box;

  // 表单内容区
  &__body {
    padding: 0.1rem 0;
  }

  // 基本信息横排字段容器（姓名、电话、微信、邮箱、城市一行排列，允许换行）
  &__fields-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.16rem;
  }

  // 横排中的单个字段项
  &__field-item {
    flex: 1;
    min-width: 1.6rem;
  }

  // 作品集链接整行字段
  &__field-full {
    margin-top: 0.16rem;
  }

  // 单个字段
  &__field {
    margin-bottom: 0.02rem;
  }

  &__label {
    display: block;
    font-size: 0.12rem;
    font-weight: 600;
    color: $text-middle;
    margin-bottom: 0.06rem;
  }

  &__required {
    color: $danger;
    margin-right: 0.02rem;
  }

  &__input {
    width: 100%;
    box-sizing: border-box;
    padding: 0.08rem 0.12rem;
    font-size: 0.13rem;
    color: $text-dark;
    background: $bg-white;
    border: 1px solid $border-color;
    border-radius: 0.04rem;
    outline: none;
    transition: all 0.2s;

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

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

  // 多行文本输入框
  &__textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 0.08rem 0.12rem;
    font-size: 0.13rem;
    color: $text-dark;
    background: $bg-white;
    border: none;
    border-radius: 0.04rem;
    outline: none;
    transition: all 0.2s;
    resize: vertical;
    font-family: inherit;
    line-height: 1.6;
    padding-right: 0.3rem;

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

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

  // 描述段落容器
  &__desc-item {
    position: relative;
    margin-bottom: 0.08rem;
  }

  // 描述删除按钮
  &__desc-remove {
    position: absolute;
    right: 0.08rem;
    top: 0.06rem;
    background: none;
    border: none;
    padding: 0.02rem 0.04rem;
    cursor: pointer;
    color: $text-light;
    font-size: 0.14rem;
    line-height: 1;
    border-radius: 0.03rem;
    transition: all 0.2s;

    &:hover {
      color: $danger;
    }
  }

  // 横排字段容器
  &__row {
    display: flex;
    gap: 0.12rem;
  }

  // 半宽字段
  &__field--half {
    flex: 1;
    min-width: 0;
  }

  // ==================== 经历卡片模块 ====================

  &__edu-card {
    padding-bottom: 0.16rem;
    margin-bottom: 0.16rem;
    border-bottom: 1px solid $border-color;

    &:last-of-type {
      border-bottom: none;
    }
  }

  &__edu-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.12rem;
  }

  &__edu-index {
    font-size: 0.13rem;
    font-weight: 600;
    color: $text-dark;
  }

  &__edu-delete {
    background: none;
    border: none;
    padding: 0.04rem 0.08rem;
    cursor: pointer;
    color: $text-light;
    font-size: 0.12rem;
    border-radius: 0.04rem;
    transition: all 0.2s;

    &:hover {
      color: $danger;
      background: rgba($danger, 0.06);
    }
  }

  // 新增按钮
  &__add-btn {
    text-align: center;
    background: none;
    border: 1px dashed $border-color;
    border-radius: 0.04rem;
    padding: 0.04rem 0.12rem;
    font-size: 0.12rem;
    color: $text-middle;
    cursor: pointer;
    transition: all 0.2s;
    margin-top: 0.06rem;

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

    &--full {
      width: 100%;
      margin-top: 0.12rem;
      padding: 0.08rem;
    }
  }

  // ==================== 日期选择器 ====================

  &__date-picker {
    width: 100% !important;

    .el-input__wrapper {
      background: $bg-main !important;
      border: 1px solid $border-color !important;
      border-radius: 4px !important;
      box-shadow: none !important;
      padding: 4px 12px !important;
      font-size: 13px !important;
      line-height: 1.5 !important;
      height: auto !important;

      &:hover {
        border-color: $accent !important;
      }

      &.is-focus {
        border-color: $accent !important;
        background: $bg-white !important;
      }
    }

    .el-input__inner {
      font-size: 13px !important;
      color: $text-dark !important;
      height: auto !important;
      line-height: 1.5 !important;

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

    .el-input__prefix,
    .el-input__suffix {
      font-size: 14px !important;
    }

    .el-input__icon {
      width: 14px !important;
      height: 14px !important;
      font-size: 14px !important;
    }
  }

  // 日期范围容器（开始-结束横排）
  &__date-range {
    display: flex;
    align-items: center;
    gap: 0.04rem;
  }

  &__date-sep {
    color: $text-light;
    font-size: 0.12rem;
  }

  // ==================== AI润色功能 ====================

  // 个人概述标题栏（含AI润色按钮）
  &__summary-header {
    display: flex;
    align-items: center;
    gap: 0.12rem;
    margin-bottom: 0.08rem;
    margin-top: 0.1rem;
  }

  // AI润色按钮
  &__ai-polish-btn {
    padding: 0.01rem 0.06rem;
    font-size: 0.11rem;
    background: $accent;
    color: $bg-white;
    border: 1px solid $accent;
    border-radius: 0.04rem;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    >span>span{
      color: #FCD34D;
    }

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

    &:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }
  }

  // AI润色结果区域
  &__ai-result {
    margin-top: 0.04rem;
  }

  &__ai-result-label {
    font-size: 0.12rem;
    font-weight: 600;
    color: $accent;
    margin-bottom: 0.08rem;
  }

  &__ai-result-card {
    padding: 0.1rem 0.12rem;
    background: linear-gradient(to bottom, #EDF9FA 0, #fff 0.5rem);
    border-radius: 0.06rem;
  }

  &__ai-result-text {
    font-size: 0.13rem;
    color: $text-dark;
    line-height: 1.7;
    white-space: pre-wrap;
    word-break: break-word;
  }

  // AI结果操作按钮组
  &__ai-result-actions {
    display: flex;
    align-items: center;
    gap: 0.12rem;
    margin-top: 0.1rem;
  }

  // 替换为此内容按钮
  &__ai-replace-btn {
    padding: 0.04rem 0.12rem;
    font-size: 0.12rem;
    color: #fff;
    background: $accent;
    border: 1px solid $accent;
    border-radius: 0.04rem;
    cursor: pointer;
    transition: all 0.2s;

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

  // 重新生成按钮
  &__ai-regenerate-btn {
    padding: 0.04rem 0.12rem;
    font-size: 0.12rem;
    color: $accent;
    background: none;
    border: 1px solid $accent;
    border-radius: 0.04rem;
    cursor: pointer;
    transition: all 0.2s;

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

    &:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }
  }

  // ==================== 技能/证书标签 ====================

  &__skills-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.08rem;
    margin-bottom: 0.16rem;
    min-height: 0.4rem;
  }

  &__skill-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.06rem;
    padding: 0.04rem 0.1rem 0.04rem 0.12rem;
    background: $bg-main;
    border-radius: 0.14rem;
    font-size: 0.12rem;
    color: $text-dark;
    transition: all 0.2s;

    &:hover {
      background: color.adjust($bg-main, $lightness: -3%);
    }
  }

  &__skill-text {
    line-height: 1.4;
  }

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

    &:hover {
      color: $danger;
      background: rgba($danger, 0.1);
    }
  }

  &__skill-remove-icon {
    width: 0.12rem;
    height: 0.12rem;
  }

  // ==================== 底部操作按钮 ====================

  &__footer {
    display: flex;
    align-items: center;
    gap: 0.12rem;
    padding-top: 0.04rem;
  }

  &__save-btn {
    padding: 0.06rem 0.24rem;
    font-size: 0.13rem;
    font-weight: 600;
    color: $bg-white;
    background: $btn-dark;
    border: none;
    border-radius: 0.08rem;
    cursor: pointer;
    transition: all 0.2s;

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

  &__cancel-btn {
    padding: 0.06rem 0.24rem;
    font-size: 0.13rem;
    font-weight: 600;
    color: $accent;
    background: transparent;
    border: 1px solid $accent;
    border-radius: 0.08rem;
    cursor: pointer;
    transition: all 0.2s;

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

// ==================== 日期选择器弹出面板样式覆盖 ====================

.profile-drawer-date-popper {
  font-size: 14px !important;
  line-height: 1.5 !important;

  .el-date-picker {
    font-size: 14px !important;
  }

  .el-picker-panel__body {
    font-size: 14px !important;
  }

  .el-date-picker__header {
    font-size: 14px !important;
  }

  .el-month-table td .cell {
    font-size: 13px !important;
    padding: 8px 0 !important;
  }
}