/** 自定义 Element Plus 样式 */
.el-dialog {
  display: flex;
  flex-direction: column;
  margin: 0 !important;
  padding: 0 !important;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-height: calc(100% - 30px);
  max-width: calc(100% - 30px);
  border-radius: 8px !important;
  .el-dialog__header {
    padding: 0;
    padding-top: 24px;
    padding-left: 24px;
    padding-bottom: 28px;
    border-bottom: 1px solid #e4e7ed;
    .el-dialog__title {
      font-family:
        PingFangSC,
        PingFang SC;
      font-weight: 500;
      font-size: 20px;
      color: #303133;
      line-height: 20px;
    }
  }
  .el-dialog__headerbtn {
    top: 15px;
  }
  .el-dialog__close {
    font-size: 20px !important;
  }
  .el-dialog__body {
    padding: 24px;
    flex: 1;
    overflow: auto;
  }
  .el-dialog__footer {
    padding-top: 16px;
    padding-right: 24px;
    height: 72px;
    border-top: 1px solid #e4e7ed;
  }
}

// 表单
.el-form {
  .el-form-item__label {
    font-size: 16px;
  }
}

// 表格
.el-table {
  --el-table-text-color: #606266;
  // 表头
  th > .cell {
    word-break: break-word;
    font-size: 14px;
    font-weight: 500;
    color: #303133;
  }
  th.el-table__cell {
    background-color: var(--el-fill-color-light) !important;
  }
  .el-table--default .el-table__cell {
    padding: 17px 0;
  }
  .el-table--border .el-table__cell {
    border-right: none;
  }
}

// 分页
.el-pagination {
  // 参考 Bootstrap 的响应式设计 WIDTH = 768
  @media screen and (max-width: 768px) {
    .el-pagination__total,
    .el-pagination__sizes,
    .el-pagination__jump,
    .btn-prev,
    .btn-next {
      display: none !important;
    }
  }

  .el-select .el-input {
    width: 70px;
  }
  color: #606266;
  font-weight: 400;
}

.valid-code-item {
  &.is-error {
    /* 1. 左侧输入框 (wrapper) */
    .el-input__wrapper {
      border-radius: 4px 0 0 4px !important;
      z-index: 1;
      /* 关键：只给上、下、左设置红框，右侧设为 0(去掉) */
      box-shadow:
        1px 0 0 0 #f56c6c inset,
        /* 左 */ 0 1px 0 0 #f56c6c inset,
        /* 上 */ 0 -1px 0 0 #f56c6c inset,
        /* 下 */ -0px 0 0 0 transparent inset !important;
      /* 右侧彻底不要阴影 */
      -webkit-transition: unset;
      -moz-transition: unset;
      -ms-transition: unset;
      -o-transition: unset;
    }

    /* 2. 右侧按钮区域 (append) */
    .el-input-group__append {
      background-color: #fff;
      border-radius: 0 4px 4px 0 !important;
      margin-left: 0;
      position: relative;
      z-index: 2;
      box-shadow:
        0 1px 0 0 #f56c6c inset,
        /* 上红 */ 0 -1px 0 0 #f56c6c inset,
        /* 下红 */ -1px 0 0 0 #f56c6c inset !important; /* 右红 */
      border: none;
      border-left: 1px solid #dcdfe6 !important;
      background-clip: padding-box;
    }

    /* 3. 聚焦状态同步 */
    .el-input__wrapper.is-focus {
      box-shadow:
        1px 0 0 0 #f56c6c inset,
        0 1px 0 0 #f56c6c inset,
        0 -1px 0 0 #f56c6c inset !important;
    }
  }
}

//  登录错误提示弹框
.login-error-message {
  top: 36vh !important;
}

// 类似按钮的标签
.el-button--primary.is-plain.button-tag {
  --el-button-hover-text-color: var(--el-color-primary);
  --el-button-hover-bg-color: var(--el-color-primary-light-9);
  --el-button-hover-border-color: var(--el-color-primary-light-5);
  cursor: default;
}
.el-button:active.button-tag {
  --el-button-active-text-color: var(--el-color-primary);
  --el-button-active-bg-color: var(--el-color-primary-light-9);
  --el-button-active-border-color: var(--el-color-primary-light-5);
}
