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


// ====================== 2. CSS尺寸变量（与Sass变量同步）======================
:root {
  /* 间距/尺寸体系 */
  --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};
}


// ====================== 3. Element UI适配 - 尺寸变量 =======================
// 尺寸变量
$--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;


// ====================== 4. 全局尺寸样式 ======================
body {
  font-size: 14px;
  line-height: 1.5;
  margin: 0;
  padding: 0;
}

// 标签页内容溢出修复（尺寸相关）
.el-tabs__content {
  overflow: visible !important;
}


// ====================== 5. 组件尺寸样式（按优先级合并）======================
// ---------------------- 5.1 按钮（紧凑尺寸）----------------------
@mixin button-variant() {
  border-radius: 6px;
  transition: all .25s ease;
  height: $--btn-height;
  padding: 0 var(--spacing-lg);
  font-size: 13px;

  &:hover,
  &:focus {
    transform: translateY(-1px);
  }

  &:active {
    transform: translateY(1px);
  }

  &.is-disabled,
  &[disabled] {
    cursor: not-allowed;
  }
}

// 主按钮（尺寸相关）
.el-button--primary {
  @include button-variant();
}

// 功能按钮（尺寸相关）
.el-button--success,
.el-button--warning,
.el-button--danger,
.el-button--info {
  @include button-variant();
}

// 文本按钮（尺寸相关）
.el-button--text {
  height: auto;
  padding: 4px 8px;
}

// 图标按钮（圆形紧凑尺寸）
.el-button.is-circle {
  width: 26px;
  height: 26px;
  padding: 0;
  border-radius: 50%;

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

// 按钮组（无缝衔接尺寸）
.el-button-group {
  .el-button {
    border-radius: 0;
    margin: 0;

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

    &: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,
.el-button--small,
.el-button {
  padding: 4px 8px !important;
  font-size: 12px;
  height: $--btn-height - 4px;

  &.is-circle {
    padding: 4px !important;
  }
}


// ---------------------- 5.2 表格（紧凑尺寸）----------------------
.el-table {
  border-radius: 8px;
  overflow: hidden;
  margin-top: $--form-item-margin * 2; // 与表单间距

  // 表头（紧凑padding）
  .el-table__header-wrapper {
    th.el-table__cell {
      padding: 4px !important;
      height: auto;
      font-size: 13px;
    }
  }

  .el-button + .el-button {
    margin-left: 2px;
  }

  .el-button.el-button--text {
    padding: 0 2px !important;
  }

  // 表体（紧凑padding）
  .el-table__body-wrapper {
    .el-table__cell {
      padding: 2px 4px !important; // 超紧凑
      font-size: 13px;
    }
  }

  // 表尾（紧凑padding）
  .el-table__footer-wrapper {
    td {
      padding: 4px !important;
    }
  }

  // 适配尺寸类（统一紧凑）
  &.el-table--medium .el-table__cell,
  &.el-table--mini .el-table__cell {
    padding: 0 !important;
  }
}

.el-table__fixed-right {
  // 表头（紧凑padding）
  .el-table__fixed-header-wrapper {
    th.el-table__cell {
      padding: 4px !important;
      font-size: 13px;
    }
  }
}

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

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


// ---------------------- 5.3 日期范围选择器（尺寸适配）----------------------
.el-date-editor {
  height: $--btn-height;

  // 基础尺寸
  &.el-range-editor {
    padding: 0 8px;
    height: $--btn-height;

    // 图标尺寸
    .el-input__icon {
      width: 18px;
      height: 18px;
      line-height: 18px;
    }

    // 输入框尺寸
    .el-range-input {
      padding: 0 4px;
      height: 100%;
      font-size: 13px;
      width: 80px;
    }

    // 分隔符尺寸
    .el-range-separator {
      padding: 0 4px;
      font-size: 13px;
    }

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

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

// 日期选择面板尺寸
.el-picker-panel {
  border-radius: 6px;

  // 头部导航尺寸
  .el-picker-panel__header {
    padding: 6px 10px;

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

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

    th {
      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;
      }
    }
  }

  // 范围选择器底部按钮尺寸
  .el-range-picker__footer {
    padding: 6px 10px;

    button {
      height: 24px;
      line-height: 22px;
      padding: 0 12px;
      font-size: 12px;
      border-radius: 4px;
    }
  }
}


// ---------------------- 5.4 表单/输入（统一尺寸）----------------------
// 表单项布局尺寸
.el-form-item {
  margin-bottom: $--form-item-margin !important;
  font-size: 13px;

  // 标签间距
  .el-form-item__label {
    padding-right: $--spacing-base;
    font-size: 13px;
  }

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

// 输入框（统一高度）
.el-input {
  height: $--btn-height;

  .el-input__inner {
    border-radius: 0;
    height: $--btn-height;
    line-height: $--btn-height;
    font-size: 13px;
  }

  // 输入框图标尺寸
  .el-input__icon {
    height: $--btn-height;
    line-height: $--btn-height;
  }

  // 尺寸适配（统一高度）
  &.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;
    font-size: 13px;
  }
}

// 文本域尺寸
.el-textarea .el-textarea__inner {
  border-radius: 0;
  padding: $--spacing-base;
  font-size: 13px;
}

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

  // 增减按钮尺寸
  .el-input-number__increase,
  .el-input-number__decrease {
    transition: all .2s ease;
    height: $--btn-height;
    line-height: $--btn-height;
  }

  .el-input-number__increase,
  .el-input-number__decrease {
    border-radius: 0;
  }

  // 迷你尺寸
  &.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;
  }

  // 下拉面板尺寸
  .el-select-dropdown {
    border-radius: 6px;

    .el-select-dropdown__item {
      padding: 6px 16px;
      font-size: 13px;
    }
  }
}


// ---------------------- 5.5 卡片/对话框（尺寸层级）----------------------
// 卡片尺寸
.el-card {
  border-radius: 8px;
  overflow: hidden;

  // 卡片头部尺寸
  .el-card__header {
    padding: $--spacing-md $--spacing-lg;
  }

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

// 对话框尺寸
.el-dialog {
  transform: none;
  left: 0;
  position: relative;
  margin: 10vh auto 0;
  padding: 0;
  border-radius: 8px;

  // 对话框头部尺寸
  .el-dialog__header {
    padding: $--spacing-lg;
  }

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

  // 对话框底部尺寸
  .el-dialog__footer {
    padding: $--spacing-md $--spacing-lg;
    text-align: right;
  }
}

// 抽屉尺寸
.el-drawer {
  border-radius: 8px;
}

// Popover尺寸
.el-popover {
  border-radius: 8px;
  padding: $--spacing-lg;

  // Popover 标题尺寸
  .el-popover__title {
    padding-bottom: $--spacing-md;
    margin-bottom: $--spacing-md;
  }

  // Popover 底部尺寸
  .el-popover__footer {
    padding-top: $--spacing-md;
    margin-top: $--spacing-md;
    text-align: right;
  }
}

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


// ---------------------- 5.6 标签页组件（el-tabs）尺寸 ----------------======
.el-tabs {
  // 标签栏尺寸
  .el-tabs__header {
    margin: 0;
    padding: 0;

    // 标签导航容器尺寸
    .el-tabs__nav {
      height: 40px;
      line-height: 40px;
      padding: 0 var(--spacing-base);
    }

    // 标签项尺寸
    .el-tabs__item {
      height: 40px;
      line-height: 40px;
      font-size: 13px;
      transition: all 0.2s ease;
    }

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

  // 标签内容区尺寸
  .el-tabs__content {
    padding: var(--spacing-lg);
    border-radius: 0 0 6px 6px;
    min-height: 100px; // 确保有基本高度
  }

  // 卡片类型标签页尺寸
  &.el-tabs--card {
    .el-tabs__header {
      .el-tabs__nav {
        border-radius: 6px;
        overflow: hidden;
      }

      .el-tabs__item {
        margin: 0 2px;
        border-radius: 6px 6px 0 0;
      }
    }

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

  // 左侧/右侧标签页尺寸
  &.el-tabs--left,
  &.el-tabs--right {
    .el-tabs__header {
      margin: 0 var(--spacing-lg) 0 0;

      .el-tabs__nav {
        flex-direction: column;
        height: auto;
      }

      .el-tabs__item {
        width: 100%;
      }
    }

    &.el-tabs--right {
      .el-tabs__header {
        margin: 0 0 0 var(--spacing-lg);
      }
    }

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

  // 标签页关闭按钮间距
  .el-icon-close {
    margin-left: var(--spacing-sm);
    transition: all 0.2s ease;
  }

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


// ---------------------- 5.7 日期选择器（尺寸优化）----------------------
.el-date-picker {
  .el-picker-panel {
    border-radius: 8px;

    // 头部尺寸
    .el-date-picker__header {
      padding: $--spacing-md;
    }

    // 日期表格尺寸
    .el-date-table {
      th {
        padding: $--spacing-sm;
      }

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

    // 快捷选项尺寸
    .el-picker-panel__shortcut {
      padding: $--spacing-md;

      .el-picker-panel__shortcut-btn {
        padding: 4px 10px;
        border-radius: 4px;
        transition: all .2s;
      }
    }
  }

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

  // 范围输入框布局
  .el-range-editor.el-input__inner {
    display: inline-flex !important;
  }
}


// ---------------------- 5.8 描述列表组件（el-descriptions）- 尺寸适配 ======================
.el-descriptions {
  width: 100%;
  overflow: hidden;

  // 描述列表头部尺寸
  &__header {
    padding: $--spacing-base $--spacing-lg;
    font-size: 14px;
  }

  // 描述列表主体容器尺寸
  &__body {
    width: 100%;
  }

  // 描述列表行布局
  &__row {
    display: flex;
    width: 100%;

    // 最后一行布局
    &:last-child {
      border-bottom: none;
    }
  }

  // 描述列表标签项尺寸
  .el-descriptions-item__label {
    padding: $--spacing-lg;
    box-sizing: border-box;
    white-space: nowrap;
    font-size: 13px;
  }

  // 描述列表内容项尺寸
  &-item__content {
    padding: $--spacing-lg;
    flex: 1;
    box-sizing: border-box;
    font-size: 13px;
    word-break: break-word;
  }

  // 带边框模式尺寸
  &--border {
    border-radius: 8px;
    overflow: hidden;
  }

  // 尺寸适配
  &--small {
    .el-descriptions__label,
    .el-descriptions__content {
      padding: calc($--spacing-base / 2) $--spacing-base; 
      font-size: 12px;
    }

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

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

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

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

    .el-descriptions__label {
      width: 100%;
    }
  }
}

// 菜单尺寸
.el-menu {
  .el-menu-item,
  .el-submenu__title {
    height: 40px !important;
    line-height: 40px !important;
  }

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


// ---------------------- 5.10 其他组件（标签/分页/上传）尺寸 ----------------------
// 标签尺寸
.el-tag {
  padding: 2px 8px;
  border-radius: 2px;
  font-size: 12px;
  height: auto;
  margin-right: 0;

  // 表格内标签尺寸
  .cell & {
    margin-right: 0;
    padding: 1px !important;
    border-radius: 0 !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;
  }

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

// 分页容器尺寸
div.pagination-container {
  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;
  }
}

// 树形组件布局
.el-tree {
  .el-tree-node {
    &.is-current>.el-tree-node__content {
      width: 100%;
    }
  }
}