// ====================== 1. 基础颜色变量（Sass直接处理）======================
$primary-base: #5F7BA0;
// $primary-base: #2bf;
/* 工业蓝灰（主色原始值） */
$success-base: #2ECC71;
/* 成功色原始值 */
$warning-base: #E67E22;
/* 警告色原始值 */
$danger-base: #E74C3C;
/* 危险色原始值 */
$info-base: #AEB6BF;
/* 次主色原始值 */

// 背景色原始值
// 暗色
// $background-base: #2B2F36;
// $background-light-base: lighten($background-base, 5%);
// $background-lighter-base: lighten($background-base, 10%);
// $panel-bg-base: #3A3F45;
// $table-bg-base: #1E2227;

// // 暗色边框色原始值
// $border-color-base: #6E757D;
// $border-color-light: #828991;
// $border-color-lighter: #9AA1A9;

// 亮色
$background-base: #F5F5F5;
$background-light-base: lighten($background-base, 5%);
$background-lighter-base: lighten($background-base, 10%);
$--color-text-primary: #1a1a1a;
$panel-bg-base: $--color-text-primary;
$table-bg-base: transparent;

// 亮色边框色原始值
$border-color-base: #6E757D;
$border-color-light: #828991;
$border-color-lighter: #9AA1A9;


// ====================== 2. 间距/尺寸变量（Sass变量）======================
$--spacing-sm: 4px;
$--spacing-base: 8px;
$--spacing-md: $--spacing-base;
$--spacing-lg: $--spacing-base * 2;
$--form-item-margin: $--spacing-base;
$--btn-height: 24px;

// 关键修复：添加缺失的$--border-color变量，指向基础边框色
$--border-color: $border-color-base;


// ====================== 3. CSS变量（与Sass变量同步）======================
:root {
  /* 颜色体系 - 同步自Sass原始变量 */
  --color-primary: #{$primary-base};
  --color-success: #{$success-base};
  --color-warning: #{$warning-base};
  --color-danger: #{$danger-base};
  --color-info: #{$info-base};

  /* 背景层级 */
  --color-background: #{$background-base};
  --color-background-light: #{$background-light-base};
  --color-background-lighter: #{$background-lighter-base};
  --panel-bg: #{$panel-bg-base};
  --table-bg: #{$table-bg-base};

  /* 文本色 */
  --color-text-primary: #{$--color-text-primary};
  --color-text-regular: #333333;
  --color-text-secondary: #555555;
  --color-text-placeholder: #777777;

  /* 边框色 */
  --border-color-base: #{$border-color-base};
  --border-color-light: #{$border-color-light};
  --border-color-lighter: #{$border-color-lighter};
  --border-color: #{$--border-color};
  /* 同步新增的边框色变量 */

  /* 间距/尺寸体系 */
  --spacing-sm: #{$--spacing-sm};
  --spacing-base: #{$--spacing-base};
  --spacing-md: #{$--spacing-md};
  --spacing-lg: #{$--spacing-lg};
  --form-item-margin: #{$--form-item-margin};
  --btn-height: #{$--btn-height};

  /* 金属质感变量 */
  // --metal-gradient-light: linear-gradient(145deg, #3E434A, #363B41);
  // --metal-gradient-dark: linear-gradient(145deg, #363B41, #3E434A);
  --metal-gradient-light: linear-gradient(145deg, --color-background-light, --color-background);
  --metal-gradient-dark: linear-gradient(145deg, --color-background, --color-background-light);
  --metal-highlight: rgba(255, 255, 255, .14);
  --metal-shadow: 5px 5px 12px rgba(0, 0, 0, .22), -5px -5px 12px rgba(255, 255, 255, .06);
  --metal-shadow-inset: inset 3px 3px 6px rgba(0, 0, 0, .28), inset -3px -3px 6px rgba(255, 255, 255, .06);
}


// ====================== 4. Element UI适配变量 =======================
$--color-primary: $primary-base !default;
$--color-success: $success-base !default;
$--color-warning: $warning-base !default;
$--color-danger: $danger-base !default;
$--color-info: $info-base !default;

$--color-background: $background-base !default;
$--color-background-light: $background-light-base !default;
$--color-background-lighter: $background-lighter-base !default;
$--panel-bg: $panel-bg-base !default;
$--table-bg: $table-bg-base !default;

$--color-text-primary: var(--color-text-primary) !default;
$--color-text-regular: var(--color-text-regular) !default;
$--color-text-secondary: var(--color-text-secondary) !default;
$--color-text-placeholder: var(--color-text-placeholder) !default;

// 边框色变量（包括新增的$--border-color）
$--border-color-base: $border-color-base !default;
$--border-color-light: $border-color-light !default;
$--border-color-lighter: $border-color-lighter !default;
$--border-color: $--border-color !default;
/* 关键修复：同步到Element变量 */

// 间距变量
$--spacing-sm: $--spacing-sm !default;
$--spacing-base: $--spacing-base !default;
$--spacing-md: $--spacing-md !default;
$--spacing-lg: $--spacing-lg !default;
$--form-item-margin: $--form-item-margin !default;
$--btn-height: $--btn-height !default;

$--metal-gradient-light: var(--metal-gradient-light) !default;
$--metal-gradient-dark: var(--metal-gradient-dark) !default;
$--metal-highlight: var(--metal-highlight) !default;
$--metal-shadow: var(--metal-shadow) !default;
$--metal-shadow-inset: var(--metal-shadow-inset) !default;

// Element UI兼容变量
$--font-color-primary: $--color-text-regular !default;
$--font-color-regular: $--color-text-regular !default;
$--font-color-secondary: $--color-text-secondary !default;
$--font-color-placeholder: $--color-text-placeholder !default;
$--color-loading: $--color-primary !default;


// ====================== 2. 全局样式 ======================
body {
  background: $--color-background;
  color: $--color-text-regular;
  font-size: 14px;
  line-height: 1.5;
  margin: 0;
  padding: 0;
}

// Element容器适配
.el-container,
.el-main,
.el-aside,
.el-header,
.el-footer {
  background: $--color-background;
  color: $--color-text-regular;
  border: none;
}

// 标签页内容溢出修复
.el-tabs__content {
  overflow: visible !important;
}


// ====================== 3. 组件样式（按优先级合并）======================
// ---------------------- 3.1 按钮（金属质感 + 紧凑尺寸）----------------------
@mixin button-variant($text-color, $border-color) {
  color: $text-color;
  background: $--metal-gradient-light;
  border: 1px solid $border-color;
  box-shadow: $--metal-shadow;
  border-radius: 6px;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .16);
  transition: all .25s ease;
  height: $--btn-height;
  padding: 0 var(--spacing-lg);
  font-size: 13px;

  &:hover,
  &:focus {
    color: $text-color;
    background: $--metal-gradient-dark;
    border-color: $--border-color-base;
    box-shadow: 6px 6px 14px rgba(0, 0, 0, .28), -6px -6px 14px rgba(255, 255, 255, .08);
    transform: translateY(-1px);
  }

  &:active {
    box-shadow: $--metal-shadow-inset;
    transform: translateY(1px);
  }

  &.is-disabled,
  &[disabled] {
    opacity: .6;
    filter: grayscale(.1);
    box-shadow: none;
    cursor: not-allowed;
  }
}

// 主按钮（品牌梯度）
.el-button--primary {
  @include button-variant($--color-text-primary, darken($--color-primary, 10%));
  background: linear-gradient(145deg, lighten($--color-primary, 6%), darken($--color-primary, 6%));
  border-color: darken($--color-primary, 10%);

  &:hover {
    background: linear-gradient(145deg, $--color-primary, darken($--color-primary, 8%));
  }
}

// 功能按钮（统一风格）
.el-button--success {
  @include button-variant($--color-text-primary, darken($--color-success, 10%));
  background: linear-gradient(145deg, lighten($--color-success, 6%), darken($--color-success, 6%));
}

.el-button--warning {
  @include button-variant($--color-text-primary, darken($--color-warning, 10%));
  background: linear-gradient(145deg, lighten($--color-warning, 6%), darken($--color-warning, 6%));
}

.el-button--danger {
  @include button-variant($--color-text-primary, darken($--color-danger, 10%));
  background: linear-gradient(145deg, lighten($--color-danger, 6%), darken($--color-danger, 6%));
}

.el-button--info {
  @include button-variant(#111, darken($--color-info, 10%));
  background: linear-gradient(145deg, lighten($--color-info, 6%), darken($--color-info, 6%));
}

// 文本按钮（低干扰）
.el-button--text {
  color: $--color-text-secondary;
  background: transparent;
  border: none;
  box-shadow: none;
  height: auto;
  padding: 4px 8px;

  &:hover {
    color: $--color-primary;
    background: rgba($--color-primary, .12);
    transform: none;
  }
}

// 图标按钮（圆形紧凑）
.el-button--icon {
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 8px;

  &:only-child {
    padding: 0;
  }
}

// 按钮组（无缝衔接）
.el-button-group {
  .el-button {
    border-radius: 0;
    margin: 0;
    border-left: 1px solid $--border-color-lighter;

    &:first-child {
      border-radius: 6px 0 0 6px;
      border-left: none;
    }

    &:last-child {
      border-radius: 0 6px 6px 0;
    }

    &:not(:last-child) {
      border-right: none;
    }
  }
}

.el-button--medium {
  padding: 4px 8px !important;
  font-size: 12px;
  height: $--btn-height - 4px;
}

// 迷你按钮（超紧凑）
.el-button--mini {
  padding: 4px 8px !important;
  font-size: 12px;
  height: $--btn-height - 4px;
  &.is-circle {
    padding: 4px !important;
  }
}

.el-button--small {
  padding: 4px 8px !important;
  font-size: 12px;
  height: $--btn-height - 4px;
}


// ---------------------- 3.2 表格（深色交替 + 金属边框）----------------------
.el-table {
  background: $--table-bg;
  // border: 1px solid $--border-color-light;
  border-radius: 0px;
  box-shadow: 0 6px 16px rgba(20, 30, 50, 0.08);
  color: $--color-text-regular;
  overflow: hidden;
  margin-top: $--form-item-margin * 2; // 与表单间距

  // 分割线
  &::before {
    background-color: $--border-color-lighter;
  }

  // 表头（深灰黑 + 纯白文字）
  .el-table__header-wrapper {
    th.el-table__cell {
      background: lighten($--color-background, 6%);
      color: $--color-text-primary;
      font-weight: 600;
      border-bottom: 1px solid $--border-color-lighter;
      padding: 0 !important; // 紧凑 padding
      height: auto;
      font-size: 13px;
    }
  }
}

.el-table__fixed,
.el-table__fixed-right,
.el-table__fixed-left {
  // 表头（深灰黑 + 纯白文字）
  .el-table__fixed-header-wrapper {
    th.el-table__cell {
      background: lighten($--color-background, 6%);
      color: $--color-text-primary;
      font-weight: 600;
      border-bottom: 1px solid $--border-color-lighter;
      padding: 0 !important; // 紧凑 padding
      font-size: 13px;
    }
  }
}

// ---------------------- 3.2 日期范围选择器 ----------------------
// 日期范围选择器主题样式
.el-date-editor {
  height: $--btn-height;

  // 基础样式
  &.el-range-editor {
    background: $--color-background;
    border: 1px solid $--border-color;
    border-radius: 4px;
    color: $--color-text-regular;
    height: $--btn-height;
    padding: 0 8px;
    box-shadow: none;
    transition: all 0.2s ease;

    // 悬停状态
    &:hover {
      border-color: $--color-primary;
      box-shadow: 0 0 0 2px rgba($--color-primary, 0.2);
    }

    // 聚焦状态
    &.is-focus {
      border-color: $--color-primary;
      box-shadow: 0 0 0 2px rgba($--color-primary, 0.2);
      outline: none;
    }

    // 图标样式
    .el-input__icon {
      color: $--color-text-secondary;
      width: 18px;
      height: 18px;
      line-height: 18px;

      &:hover {
        color: $--color-primary;
      }
    }

    // 输入框样式
    .el-range-input {
      background: transparent;
      border: none;
      color: $--color-text-regular;
      padding: 0 4px;
      height: 100%;
      font-size: 13px;
      width: 80px;

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

      &:focus {
        outline: none;
      }
    }

    // 分隔符样式
    .el-range-separator {
      color: $--color-text-secondary;
      padding: 0 4px;
      font-size: 13px;
    }

    // 清除图标
    .el-range__close-icon {
      margin-left: 4px;

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

  &--medium.el-input__inner {
    height: auto;
  }
}

.el-range-editor--medium.el-input__inner {
  height: $--btn-height !important;
  width: auto !important;

  .el-range-separator {
    padding: 0;
    line-height: 16px;
    font-size: 13px;
    color: $--color-text-secondary;
  }
}

// 日期选择面板样式
.el-picker-panel {
  background: $--color-background;
  border: 1px solid $--border-color;
  border-radius: 6px;
  box-shadow: $--metal-shadow;
  color: $--color-text-regular;

  // 头部导航
  .el-picker-panel__header {
    border-bottom: 1px solid $--border-color-lighter;
    padding: 6px 10px;

    button {
      color: $--color-text-secondary;

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

    .el-picker-panel__icon-btn {
      width: 24px;
      height: 24px;
      line-height: 24px;
      border-radius: 4px;
    }

    .el-date-picker__header-label {
      color: $--color-text-primary;
      font-weight: 500;
    }
  }

  // 日期表格
  .el-date-table {
    border-collapse: separate;
    border-spacing: 2px;

    th {
      color: $--color-text-secondary;
      font-weight: normal;
      padding: 4px 0;
      font-size: 12px;
    }

    td {
      padding: 0;

      .el-date-table__cell {
        width: 28px;
        height: 28px;
        line-height: 28px;
        border-radius: 4px;
        margin: 1px;
        font-size: 13px;

        &:hover {
          background: rgba($--color-primary, 0.2);
        }

        &.current {
          background: $--color-primary;
          color: $--color-text-primary;
        }

        &.in-range {
          background: rgba($--color-primary, 0.1);

          &::before {
            background: $--color-primary;
          }
        }

        &.start-date,
        &.end-date {
          background: $--color-primary;
          color: $--color-text-primary;
        }
      }
    }

    .available.in-range div {
      background-color: $--color-background;
    }
  }

  // 范围选择器底部按钮
  .el-range-picker__footer {
    border-top: 1px solid $--border-color-lighter;
    padding: 6px 10px;

    button {
      background: $--color-background-light;
      border: 1px solid $--border-color;
      color: $--color-text-regular;
      height: 24px;
      line-height: 22px;
      padding: 0 12px;
      font-size: 12px;
      border-radius: 4px;

      &:hover {
        background: rgba($--color-primary, 0.2);
        border-color: $--color-primary;
      }

      &.el-button--primary {
        background: $--color-primary;
        border-color: $--color-primary;
        color: $--color-text-primary;

        &:hover {
          background: lighten($--color-primary, 10%);
          border-color: lighten($--color-primary, 10%);
        }
      }
    }
  }
}

// 自定义表格工具类（补充紧凑）
.small-padding .cell {
  padding-left: $--spacing-base / 2;
  padding-right: $--spacing-base / 2;
}

.status-col .cell {
  padding: 0 10px !important;
  text-align: center;
}


// ---------------------- 3.3 表单/输入（金属内阴影 + 统一高度）----------------------
// 表单项布局
.el-form-item {
  // margin-bottom: 0 !important;
  margin-bottom: $--form-item-margin !important;
  margin-right: 4px;
  font-size: 12px;

  // 标签样式
  .el-form-item__label {
    color: $--color-text-secondary;
    padding-right: $--spacing-base;
    font-size: 12px;
  }

  // 搜索表单 inline 布局
  &.search-form-item {
    display: inline-block;
    margin-right: $--spacing-base;
    vertical-align: middle;
  }

  .el-form-item__error {
    font-size: 12px;
    top: 50%;
    transform: translateY(-50%);
    right: 6px;
    left: auto;
  }
}

// 输入框（统一高度 + 金属内阴影）
.el-input {
  height: $--btn-height;

  .el-input__inner {
    background: $--metal-gradient-light;
    border-color: $--border-color-light;
    color: $--color-text-regular;
    // box-shadow: $--metal-shadow-inset;
    border-radius: 0;
    height: $--btn-height;
    line-height: $--btn-height;
    font-size: 13px;

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

    &:focus {
      border-color: $--color-primary;
      box-shadow: $--metal-shadow-inset;
    }
  }

  // 输入框图标
  .el-input__icon {
    color: $--color-text-secondary;
    height: $--btn-height;
    line-height: $--btn-height;

    &:hover {
      color: $--color-primary;
    }
  }

  // 尺寸适配（统一高度）
  &.el-input--small .el-input__inner,
  &.el-input--medium .el-input__inner,
  &.el-input--large .el-input__inner {
    height: $--btn-height;
    line-height: $--btn-height;
  }

  .el-input-group__append,
  .el-input-group__prepend {
    border-radius: 0;
    border-left: 1px solid $--border-color-light;
    background: $--metal-gradient-light;
    color: $--color-text-regular;
    // box-shadow: $--metal-shadow-inset;
    font-size: 13px;
  }
}

// 文本域
.el-textarea .el-textarea__inner {
  background: $--metal-gradient-light;
  border-color: $--border-color-light;
  color: $--color-text-regular;
  // box-shadow: $--metal-shadow-inset;
  border-radius: 0;
  padding: $--spacing-base;
  font-size: 13px;

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

  &:focus {
    border-color: $--color-primary;
    box-shadow: $--metal-shadow-inset, 0 0 0 2px rgba($--color-primary, .22);
  }
}

// 数字输入框
.el-input-number {
  .el-input__inner {
    border-radius: 0;
  }

  // 增减按钮
  .el-input-number__increase,
  .el-input-number__decrease {
    background: $--metal-gradient-light;
    border-color: $--border-color-light;
    box-shadow: $--metal-shadow;
    transition: all .2s ease;
    height: $--btn-height;
    line-height: $--btn-height;

    &:hover {
      background: $--metal-gradient-dark;
      border-color: $--border-color-base;
      box-shadow: 0 0 0 1px $--border-color-base;
    }

    &.is-disabled {
      background: $--color-background-lighter;
      border-color: $--border-color-lighter;
      color: $--color-text-placeholder;
      cursor: not-allowed;
      box-shadow: none;
    }
  }

  .el-input-number__increase {
    border-radius: 0;

    .el-icon-plus {
      color: $--color-text-regular;
    }
  }

  .el-input-number__decrease {
    border-radius: 0;

    .el-icon-minus {
      color: $--color-text-regular;
    }
  }

  // 迷你尺寸
  &.el-input-number--small {

    .el-input-number__increase,
    .el-input-number__decrease {
      width: 24px;
      height: 24px;
    }
  }

  // 无控制按钮
  &.is-without-controls .el-input__inner {
    border-radius: 0;
  }
}

// 选择器/下拉框
.el-select {
  .el-input__inner {
    border-radius: 0;
    height: 24px !important;
  }

  .el-select__tags {
    .el-tag {
      max-width: 100px;
    }
  }

  // 下拉面板
  .el-select-dropdown {
    background: $--metal-gradient-light;
    border: 1px solid $--border-color-light;
    box-shadow: $--metal-shadow;
    color: $--color-text-regular;
    border-radius: 6px;

    .el-select-dropdown__item {
      color: $--color-text-regular;
      padding: 6px 16px;
      font-size: 13px;

      &:hover {
        background-color: rgba($--color-primary, .12);
      }

      &.selected {
        background-color: rgba($--color-primary, .20);
        color: $--color-text-primary;
      }
    }
  }
}

// Treeselect 样式
.vue-treeselect {
  &__control {
    min-height: 24px;
    border-radius: 0;
    border-color: $--border-color-light;
    background: linear-gradient(180deg, #fdfdff 0%, #f4f6fa 100%);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.04);
  }

  &__single-value,
  &__placeholder,
  &__input-container {
    line-height: 24px;
    font-size: 12px;
    color: $--color-text-regular;
  }

  &__control-arrow-container {
    height: 24px;
  }

  &__menu {
    background: $--metal-gradient-light;
    border: 1px solid $--border-color-light;
    border-radius: 6px;
    box-shadow: $--metal-shadow;
    padding: 4px 0;
  }

  &__option {
    color: $--color-text-regular;
    padding: 6px 16px;
    font-size: 13px;

    &--highlight {
      background-color: rgba($--color-primary, .12);
    }

    &--selected {
      background-color: rgba($--color-primary, .20);
      color: $--color-text-primary;
    }
  }
}

// 开关
.el-switch {
  .el-switch__core {
    background-color: $--border-color-base;
    box-shadow: $--metal-shadow-inset;
  }

  &.is-checked .el-switch__core {
    background-color: $--color-primary;
  }
}

// 滑块
.el-slider__bar {
  background: $--metal-gradient-dark;
}

.el-slider__button {
  background: $--metal-gradient-light;
  border-color: $--border-color-light;
  box-shadow: $--metal-shadow;
}

// 复选框
.el-checkbox {
  .el-checkbox__inner {
    background: $--metal-gradient-light;
    border-color: $--border-color-light;
    box-shadow: $--metal-shadow-inset;
    border-radius: 4px;
  }

  &.is-checked .el-checkbox__inner {
    background: $--metal-gradient-dark;
    border-color: $--border-color-base;

    &::after {
      border-color: $--color-text-primary;
    }
  }
}


// ---------------------- 3.4 卡片/对话框（金属外阴影 + 层级）----------------------
// 卡片
.el-card {
  background: $--metal-gradient-light;
  border: 1px solid $--border-color-light;
  box-shadow: $--metal-shadow;
  border-radius: 8px;
  color: $--color-text-regular;
  overflow: hidden;

  // 卡片头部
  .el-card__header {
    padding: $--spacing-md $--spacing-lg;
    border-bottom: 1px solid $--border-color-lighter;
    color: $--color-text-primary;
    background: transparent;
  }

  // 卡片主体
  .el-card__body {
    padding: $--spacing-lg;
  }
}

// 对话框
.el-dialog {
  transform: none;
  left: 0;
  position: relative;
  margin: 10vh auto 0;
  // background: $--metal-gradient-light !important;
  background-color: white !important;
  border: 1px solid $--border-color-light;
  box-shadow: $--metal-shadow;
  border-radius: 8px;
  color: $--color-text-regular;

  // 对话框头部
  .el-dialog__header {
    padding: $--spacing-lg;
    border-bottom: 1px solid $--border-color-lighter;
  }

  .el-dialog__title {
    color: $--color-text-primary;
  }

  // 对话框主体
  .el-dialog__body {
    padding: $--spacing-lg;
    max-height: 60vh;
    overflow-y: auto;
  }

  // 对话框底部
  .el-dialog__footer {
    padding: $--spacing-md $--spacing-lg;
    border-top: 1px solid $--border-color-lighter;
    text-align: right;
  }
}

// 抽屉
.el-drawer {
  // background: $--metal-gradient-light;
  border: 1px solid $--border-color-light;
  box-shadow: $--metal-shadow;
  border-radius: 8px;
  color: $--color-text-regular;
}

// Popover
.el-popover {
  // background: $--metal-gradient-light;
  border: 1px solid $--border-color-light;
  border-radius: 8px;
  box-shadow: $--metal-shadow;
  color: $--color-text-regular;
  padding: $--spacing-lg;

  &:focus {
    outline: none;
  }

  // Popover 标题
  .el-popover__title {
    color: $--color-text-primary;
    border-bottom: 1px solid $--border-color-lighter;
    padding-bottom: $--spacing-md;
    margin-bottom: $--spacing-md;
    font-weight: 600;
  }

  // Popover 底部
  .el-popover__footer {
    border-top: 1px solid $--border-color-lighter;
    padding-top: $--spacing-md;
    margin-top: $--spacing-md;
    text-align: right;
  }

  // 箭头样式
  .popper__arrow {
    &::after {
      background: $--metal-gradient-light;
    }

    border-color: $--border-color-light;
  }
}

.el-button-group+.el-popover {
  margin-left: 5px;
}

// ====================== 标签页组件（el-tabs）样式 =======================
.el-tabs {
  // 标签页容器
  background-color: transparent;
  color: $--color-text-regular;

  // 标签栏
  .el-tabs__header {
    margin: 0;
    padding: 0;
    border-bottom: 1px solid $--border-color-light;
    background-color: transparent;

    // 标签导航容器
    .el-tabs__nav {
      height: 40px;
      line-height: 40px;
      // background-color: $--color-background-light;
      border-radius: 6px 6px 0 0;
      padding: 0 var(--spacing-base);
      // box-shadow: inset 0 -1px 0 $--border-color-light;
    }

    // 标签项
    .el-tabs__item {
      color: $--color-text-secondary;
      height: 40px;
      line-height: 40px;
      // padding: 0 var(--spacing-lg);
      // margin: 0 var(--spacing-sm);
      font-size: 13px;
      transition: all 0.2s ease;
      border-bottom: 2px solid transparent;

      // 悬停状态
      &:hover {
        color: $--color-primary;
        // background-color: rgba($--color-primary, 0.08);
        border-bottom-color: rgba($--color-primary, 0.3);
      }

      // 激活状态
      &.is-active {
        color: $--color-primary;
        font-weight: 500;
        border-bottom-color: $--color-primary;
        // background-color: rgba($--color-primary, 0.1);
      }

      // 禁用状态
      &.is-disabled {
        color: $--color-text-placeholder;
        cursor: not-allowed;

        &:hover {
          color: $--color-text-placeholder;
          background-color: transparent;
          border-bottom-color: transparent;
        }
      }
    }

    // 标签滚动按钮
    .el-tabs__nav-prev,
    .el-tabs__nav-next {
      width: 32px;
      height: 32px;
      line-height: 32px;
      margin: 4px 0;
      color: $--color-text-secondary;
      border-radius: 4px;
      transition: all 0.2s ease;

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

      &.is-disabled {
        color: $--color-text-placeholder;
        cursor: not-allowed;

        &:hover {
          color: $--color-text-placeholder;
          background-color: transparent;
        }
      }
    }

    // 标签分隔线
    .el-tabs__nav-wrap::after {
      background-color: $--border-color-light;
    }
  }

  // 标签内容区
  .el-tabs__content {
    // padding: var(--spacing-lg);
    background-color: $--metal-gradient-light;
    // border: 1px solid $--border-color-light;
    // border-radius: 0 0 6px 6px;
  }

  // 卡片类型标签页
  &.el-tabs--card {
    .el-tabs__header {
      border-bottom: none;

      .el-tabs__nav {
        background-color: transparent;
        box-shadow: none;
        border-radius: 6px;
        overflow: hidden;
      }

      .el-tabs__item {
        border: 1px solid $--border-color-light;
        border-bottom: none;
        // border-radius: 6px 6px 0 0;
        margin: 0 2px;
        background-color: $--metal-gradient-light;

        &.is-active {
          border-color: $--border-color-light;
          border-bottom-color: $--metal-gradient-light;
          background-color: $--color-primary;
          color: $--metal-gradient-light;
          position: relative;
          bottom: -1px;
        }
      }
    }

    .el-tabs__content {
      border-radius: 0 6px 6px 6px;
      margin-top: -1px;
    }
  }

  // 左侧/右侧标签页
  &.el-tabs--left,
  &.el-tabs--right {
    .el-tabs__header {
      border-bottom: none;
      border-right: 1px solid $--border-color-light;
      margin: 0 var(--spacing-lg) 0 0;

      .el-tabs__nav {
        flex-direction: column;
        height: auto;
        background-color: transparent;
        box-shadow: none;
      }

      .el-tabs__item {
        width: 100%;
        border-bottom: none;
        border-right: 2px solid transparent;

        &.is-active {
          border-right-color: $--color-primary;
          background-color: rgba($--color-primary, 0.1);
        }
      }
    }

    &.el-tabs--right {
      .el-tabs__header {
        border-right: none;
        border-left: 1px solid $--border-color-light;
        margin: 0 0 0 var(--spacing-lg);
      }

      .el-tabs__item {
        border-right: none;
        border-left: 2px solid transparent;

        &.is-active {
          border-left-color: $--color-primary;
        }
      }
    }

    .el-tabs__content {
      border-radius: 6px;
    }
  }

  // 标签页关闭按钮
  .el-icon-close {
    color: $--color-text-secondary;
    margin-left: var(--spacing-sm);
    opacity: 0.7;
    transition: all 0.2s ease;

    &:hover {
      color: $--color-danger;
      opacity: 1;
    }
  }

  // 可编辑标签添加按钮
  .el-tabs__new-tab {
    color: $--color-text-secondary;
    margin: 0 var(--spacing-sm);
    transition: all 0.2s ease;

    &:hover {
      color: $--color-primary;
      background-color: rgba($--color-primary, 0.08);
    }
  }
}

// ---------------------- 3.5 日期选择器（深色适配 + 交互优化）----------------------
.el-date-picker {
  .el-picker-panel {
    background: $--metal-gradient-light;
    border: 1px solid $--border-color-light;
    border-radius: 8px;
    box-shadow: $--metal-shadow;
    color: $--color-text-regular;

    // 头部（年月切换）
    .el-date-picker__header {
      border-bottom: 1px solid $--border-color-lighter;
      color: $--color-text-primary;
      padding: $--spacing-md;

      .el-date-picker__header-label {
        cursor: pointer;
        transition: color .2s;

        &:hover {
          color: $--color-primary;
        }
      }

      .el-date-picker__header-btn {
        color: $--color-text-secondary;
        cursor: pointer;
        transition: color .2s;

        &:hover {
          color: $--color-primary;
        }

        &.is-disabled {
          color: $--color-text-placeholder;
          cursor: not-allowed;
        }
      }
    }

    // 日期表格
    .el-date-table {
      th {
        color: $--color-text-secondary;
        font-weight: normal;
        padding: $--spacing-sm;
      }

      td {
        color: $--color-text-regular;
        border-radius: 4px;
        transition: all .2s;
        padding: $--spacing-sm;

        &.available {
          cursor: pointer;

          &:hover {
            background: $--metal-highlight;
          }
        }

        &.today {
          color: $--color-primary;
          font-weight: 600;
        }

        &.current,
        &.selected {
          background: $--color-primary;
          color: $--color-text-primary;

          &:hover {
            background: darken($--color-primary, 5%);
          }
        }

        &.disabled {
          color: $--color-text-placeholder;
          cursor: not-allowed;

          &:hover {
            background: transparent;
          }
        }
      }
    }

    // 快捷选项
    .el-picker-panel__shortcut {
      padding: $--spacing-md;
      border-top: 1px solid $--border-color-lighter;

      .el-picker-panel__shortcut-btn {
        padding: 4px 10px;
        border-radius: 4px;
        cursor: pointer;
        transition: all .2s;
        color: $--color-text-regular;

        &:hover {
          background: $--metal-highlight;
          color: $--color-text-primary;
        }

        &.is-selected {
          background: $--color-primary;
          color: $--color-text-primary;

          &:hover {
            background: darken($--color-primary, 5%);
          }
        }
      }
    }
  }

  // 范围选择器分隔符
  .el-range-separator {
    color: $--color-text-regular;
    padding: 0 $--spacing-md;
    box-sizing: content-box;
  }

  // 范围输入框
  .el-range-input {
    background-color: transparent !important;
  }

  .el-range-editor.el-input__inner {
    display: inline-flex !important;
  }
}

// ====================== 描述列表组件（el-descriptions）- 深色模式 ======================
.el-descriptions {
  width: 100%;
  // background: $--color-background !important; // 黑色背景
  // box-shadow: $--metal-shadow;
  overflow: hidden;
  color: $--color-text-primary; // 白色文字

  // 描述列表头部
  &__header {
    padding: $--spacing-base $--spacing-lg;
    border-bottom: 1px solid $--border-color-lighter;
    // background: $--metal-gradient-dark;
    color: $--color-text-primary; // 白色标题
    font-weight: 600;
    font-size: 14px;
  }

  // 描述列表主体容器
  &__body {
    width: 100%;
    background-color: transparent;
  }

  // 描述列表行
  &__row {
    display: flex;
    width: 100%;
    border-bottom: 1px solid $--border-color-lighter;

    // 最后一行移除底部边框
    &:last-child {
      border-bottom: none;
    }
  }

  // 描述列表标签项（左侧）
  .el-descriptions-item__label {
    // padding: $--spacing-lg;
    // background: $--color-background !important; // 极浅灰背景区分标签
    color: $--color-text-secondary; // 浅灰文字
    font-weight: 500;
    // border-right: 1px solid $--border-color-lighter;
    box-sizing: border-box;
    white-space: nowrap;
    font-size: 13px;
  }

  // 描述列表内容项（右侧）
  &-item__content {
    // padding: $--spacing-lg;
    // background: $--color-background-light;
    color: $--color-text-primary; // 白色文字
    flex: 1;
    box-sizing: border-box;
    font-size: 13px;
    word-break: break-word;
  }

  // 带边框模式适配
  &--border {
    border: 1px solid $--border-color-light;
    border-radius: 8px;
    overflow: hidden;

    .el-descriptions__label,
    .el-descriptions__content {
      border-color: $--border-color-lighter;
    }

    .el-descriptions__header {
      border-bottom: 1px solid $--border-color-light;
    }
  }

  // 尺寸适配
  &--small {

    .el-descriptions__label,
    .el-descriptions__content {
      padding: $--spacing-base / 2 $--spacing-base;
      font-size: 12px;
    }

    .el-descriptions__header {
      padding: $--spacing-base / 2 $--spacing-base;
      font-size: 13px;
    }
  }

  &--large {

    .el-descriptions__label,
    .el-descriptions__content {
      padding: $--spacing-lg $--spacing-lg;
      font-size: 14px;
    }

    .el-descriptions__header {
      padding: $--spacing-base $--spacing-lg;
      font-size: 15px;
    }
  }

  // 响应式适配
  @media (max-width: 768px) {
    .el-descriptions__row {
      flex-direction: column;
    }

    .el-descriptions__label {
      border-right: none;
      border-bottom: 1px solid $--border-color-lighter;
      width: 100%;
    }
  }
}


// ---------------------- 3.6 导航类（面包屑/菜单）----------------------
// 面包屑
.el-breadcrumb {
  padding: $--spacing-md 0;
  font-size: 13px;

  .el-breadcrumb__inner,
  .el-breadcrumb__inner a {
    font-weight: 400 !important;
    color: $--color-text-secondary !important;
  }

  .el-breadcrumb__separator {
    margin: 0 $--spacing-sm;
    color: $--border-color;
  }
}

// 菜单
.el-menu {
  border-right: 1px solid $--border-color;
  background: $--color-background;

  .el-menu-item,
  .el-submenu__title {
    padding: 0 16px !important;
    height: 40px !important;
    line-height: 40px !important;
    color: $--color-text-secondary;
    font-size: 13px;

    &:hover {
      background: rgba($--color-primary, .12);
      color: $--color-primary;
    }
  }

  // 折叠菜单
  &.el-menu--collapse>div>.el-submenu>.el-submenu__title .el-submenu__icon-arrow {
    display: none;
  }

  // 激活菜单
  .el-menu-item.is-active {
    color: $--color-primary;
    background: rgba($--color-primary, .15);
    border-right: 3px solid $--color-primary;
  }
}


// ---------------------- 3.7 其他组件（标签/分页/上传）----------------------
// 标签
.el-tag {
  background: $--metal-gradient-light;
  border-color: $--border-color-light;
  color: $--color-text-regular;
  padding: 2px 4px;
  border-radius: 4px;
  font-size: 12px;
  height: auto;
  margin-right: 0;

  // 主色标签
  &.el-tag--primary {
    background: rgba($--color-primary, .22);
    color: $--color-primary;
    border-color: transparent;
  }

  // 表格内标签（无圆角）
  .cell & {
    margin-right: 0;
    padding: 1px !important;
    border-radius: 4px !important;
  }
}

// 分页
.el-pagination {
  margin-top: 16px;
  padding: 8px 0;
  text-align: right;

  .el-pager li {
    margin: 0 2px;
    min-width: 30px;
    height: 30px;
    line-height: 30px;
    border-radius: 4px;
    background: $--metal-gradient-light;
    border: 1px solid $--border-color-light;

    &:hover {
      background: $--metal-gradient-dark;
      color: $--color-primary;
    }

    &.active {
      background: $--color-primary;
      color: $--color-text-primary;
      border-color: $--color-primary;
    }
  }

  // 输入框后缀
  .el-input__suffix {
    position: absolute;
    line-height: 0;
  }
}

// 分页容器（透明背景）
div.pagination-container {
  background-color: transparent !important;
  padding: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;

  .el-pagination {
    padding: 0 !important;
  }
}

// 上传组件
.el-upload {
  input[type="file"] {
    display: none !important;
  }

  .el-upload__input {
    display: none;
  }

  // 拖拽上传容器
  .el-upload-dragger {
    width: 100%;
    height: 200px;
    border-radius: 6px;
    border: 2px dashed $--border-color;
    background: $--metal-gradient-light;
    color: $--color-text-secondary;

    &:hover {
      border-color: $--color-primary;
      background: $--metal-gradient-dark;
    }
  }
}

// 树形组件
.el-tree {
  background-color: transparent !important;
  color: $--color-text-regular;

  .el-tree-node {
    // &:hover {
    //   background: rgba($--color-primary, .12);
    // }

    &.is-current>.el-tree-node__content {
      background: rgba($--color-primary, .2);
      color: $--color-primary;
    }
  }
}