@use './element.scss' as *;
@use './stage.scss' as *;

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#app {
  height: inherit;
}


:root {
  --mj-menu-header-height:#{$mj-menu-header-height};
  --mj-border-color:#{$mj-border-color};
  --mj-padding-standard:#{$mj-padding-standard};
  --mj-popper-radius: 8px;
  --el-color-primary: #2b65f6;
}


// popover 筛选框的全局样式
.filter-popper.el-popover.el-popper {
  --el-popover-padding: 0;
  border-radius: var(--mj-popper-radius);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

// 全局重写element相关样式
.mj-input-form {
  .el-input {
    --el-border-radius-base: 10px;
    --el-border-color: #E2E8F0;
  }
}


// 搜索框动画
.search-auto-expand-input {
  --default-width: 160px;
  --max-width: 224px;
  width: var(--default-width);
  transition: width 0.3s ease;

  &:focus-within {
    width: var(--max-width);
  }

  .auto-expand-input {
    --el-input-border-radius: 4px;
    width: 100%;
  }
}


//   字典状态全局样式
.mj-status-dot {
  cursor: pointer;

  &::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--data-status-color);
    margin-right: 8px;
    vertical-align: middle;
  }
}


// 筛选框内容的全局样式内容
.mj-filter-content {
  min-width: 380px;
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  box-sizing: border-box;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
  border: 1px solid #ebeef5;

  .filter-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
  }

  .filter-header .title {
    font-weight: bold;
    font-size: 16px;
    color: #303133;
  }

  .reset-btn {
    font-size: 14px;
    color: #2b65f6;
  }

  .filter-item {
    margin-bottom: 20px;

    label {
      display: block;
      font-size: 14px;
      color: #909399;
      margin-bottom: 8px;
      font-weight: 500;
    }
  }

  .custom-select {
    --el-border-color: transparent;
    width: 100%;
    background-color: #f5f7fa;
    box-shadow: none;
    border: 1px solid #e4e7ed;
  }

  .apply-btn {
    width: 100%;
    height: 44px;
    background-color: #2b65f6;
    border-color: #2b65f6;
    font-size: 16px;
    font-weight: bold;
    border-radius: 6px;
    margin-top: 10px;

    &:hover {
      background-color: #407eff;
      border-color: #407eff;
    }
  }
}



// 全局单行省略样式
.mj-ellipsis-one-line {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}



// 卡片的全局样式

.mj-card-container {
  display: grid;
  gap: 16px;
  width: 100%;
  // 默认：一行 5 列
  grid-template-columns: repeat(5, 1fr);

  // 1400px 以下：觉得 5 个太挤，切到一行 4 列
  @media (max-width: 1400px) {
    grid-template-columns: repeat(4, 1fr);
  }

  // 1100px 以下 (iPad横屏区间)：一行 3 列
  @media (max-width: 1100px) {
    grid-template-columns: repeat(3, 1fr);
  }

  // 768px 以下 (iPad竖屏)：一行 2 列
  @media (max-width: 768px) {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  // 480px 以下 (手机端)：一行 1 列
  @media (max-width: 480px) {
    grid-template-columns: repeat(1, 1fr);
  }
}


// select下拉搜索loading全局公用样式
.mj-select-dropdown-loading {
  cursor: default;
  background-color: transparent;

  .status-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    color: #909399;
    font-size: 13px;
    height: 34px;
  }
}