// 通用样式
* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
  font-size: var(--el-font-size-base);
  color: var(--el-text-color-primary);
  background-color: var(--el-bg-color-page);
}

#app {
  height: 100%;
}

// 滚动条样式
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: var(--el-border-color-extra-light);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb {
  background: var(--el-border-color);
  border-radius: 3px;
  
  &:hover {
    background: var(--el-text-color-secondary);
  }
}

// 通用工具类
.text-center {
  text-align: center;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

.text-ellipsis {
  @include text-ellipsis;
}

.flex-center {
  @include flex-center;
}

.flex-between {
  @include flex-between;
}

.flex-start {
  @include flex-start;
}

.flex-end {
  @include flex-end;
}

.clearfix {
  @include clearfix;
}

// 间距工具类
.m-0 { margin: 0 !important; }
.m-1 { margin: var(--el-spacing-extra-small) !important; }
.m-2 { margin: var(--el-spacing-small) !important; }
.m-3 { margin: var(--el-spacing-base) !important; }
.m-4 { margin: var(--el-spacing-medium) !important; }
.m-5 { margin: var(--el-spacing-large) !important; }
.m-6 { margin: var(--el-spacing-extra-large) !important; }

.p-0 { padding: 0 !important; }
.p-1 { padding: var(--el-spacing-extra-small) !important; }
.p-2 { padding: var(--el-spacing-small) !important; }
.p-3 { padding: var(--el-spacing-base) !important; }
.p-4 { padding: var(--el-spacing-medium) !important; }
.p-5 { padding: var(--el-spacing-large) !important; }
.p-6 { padding: var(--el-spacing-extra-large) !important; }

// 卡片样式
.app-card {
  @include card-shadow;
  background: var(--el-bg-color);
  padding: var(--el-spacing-large);
  margin-bottom: var(--el-spacing-base);
}

// 页面容器
.app-container {
  padding: var(--el-spacing-base);
  background: var(--el-bg-color-page);
  min-height: calc(100vh - var(--header-height) - var(--breadcrumb-height));
}

// 表格容器
.table-container {
  background: var(--el-bg-color);
  padding: var(--el-spacing-base);
  border-radius: var(--el-border-radius-base);
  box-shadow: var(--el-box-shadow);
}

// 搜索表单
.search-form {
  background: var(--el-bg-color);
  padding: var(--el-spacing-base);
  margin-bottom: var(--el-spacing-base);
  border-radius: var(--el-border-radius-base);
  box-shadow: var(--el-box-shadow);
}

// 操作按钮组
.operation-buttons {
  margin-bottom: var(--el-spacing-base);
  
  .el-button + .el-button {
    margin-left: var(--el-spacing-small);
  }
}