@import './layout-custom-properties';
@import './mixin.scss';
@import './transition.scss';
@import './element-ui.scss';
@import './theme/default.scss';
@import './theme/black/index.scss';
@import './theme/black/sidebar.scss';
@import './theme/blue/index.scss';
@import './theme/blue/sidebar.scss';
@import './theme/blue2/index.scss';
@import './theme/blue2/sidebar.scss';
@import './theme/gray/index.scss';
@import './theme/gray/sidebar.scss';
@import './theme/dark-blue/index.scss';
@import './theme/dark-blue/sidebar.scss';
@import './theme/ocean-blue/index.scss';
@import './theme/ocean-blue/sidebar.scss';
@import './theme/green/index.scss';
@import './theme/green/sidebar.scss';
@import './display-layout.scss';
@import "./table.scss";
@import './theme/tiffany-blue-mobile/index.scss';
@import './theme/tiffany-blue-mobile/sidebar.scss';
@import 'element-plus/theme-chalk/display.css';
@import './page-list.scss';
@import './theme/forest-green/index.scss';
@import './theme/forest-green/sidebar.scss';

body {
  overflow: hidden;
  // 禁用时的背景色
  --el-disabled-bg-color: #D9DADC;
}

// 富文本禁用时颜色
.ql-container.ql-snow.ql-disabled {
  background-color: var(--el-disabled-bg-color);
  color: #333333 !important;
  -webkit-text-fill-color: #333333 !important;
}

.el-input.is-disabled .el-input__inner,
.el-textarea.is-disabled .el-textarea__inner,
.el-select .el-select__wrapper.is-disabled .el-select__selected-item,
.el-select .el-select__wrapper.is-disabled .el-select__tags-text,
.el-select .el-select__wrapper.is-disabled .el-select__input {
  color: #333333 !important;
  -webkit-text-fill-color: #333333 !important;
}

// 保持禁用时 placeholder 为 Element Plus 默认色
.el-input.is-disabled .el-input__inner::placeholder,
.el-textarea.is-disabled .el-textarea__inner::placeholder,
.el-select .el-select__wrapper.is-disabled .is-transparent {
  color: var(--el-text-color-placeholder) !important;
  -webkit-text-fill-color: var(--el-text-color-placeholder) !important;
}

.el-select-dropdown__item,
.el-tag__content,
.el-select .el-input__inner,
.el-select .el-select__tags-text,
.el-select .el-select__selected-item,
.el-table .cell,
.el-input__inner {
  white-space: pre !important;
}

// textarea 自动换行样式，否则会被white-space: nowrap覆盖
.el-textarea__inner {
  white-space: pre-wrap !important;
  word-wrap: break-word !important;
  word-break: break-all;
  overflow-wrap: break-word;
}

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

*,
:after,
:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box
}

.wrap-text {
  white-space: pre-wrap;
  word-break: break-all;
}

// 省略号
.ellipsis {
  // display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: pre;
  word-break: keep-all;
  width: 100%;

  &[webkit-line] {
    word-wrap: break-word;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;

    &[webkit-line='2'] {
      -webkit-line-clamp: 2;
    }

    &[webkit-line='3'] {
      -webkit-line-clamp: 3;
    }

    &[webkit-line='4'] {
      -webkit-line-clamp: 4;
    }
  }
}


[break-word] {
  word-wrap: break-word;
}


// 解决el-table表头错位问题
body .el-table th.gutter {
  display: table-cell !important;
}

body .el-table colgroup.gutter {
  display: table-cell !important;
}

// 日期控件宽度不自适应问题
.formContent .el-date-editor.el-input,
.formContent .el-date-editor.el-input__input,
.formContent .el-date-editor.el-input__inner,
.grid-search-form .el-date-editor.el-input,
.grid-search-form .el-date-editor.el-input__input,
.grid-search-form .el-date-editor.el-input__inner {
  width: 100%;
}

.formContent .el-date-editor--daterange.el-input,
.formContent .el-date-editor--daterange.el-input__inner,
.formContent .el-date-editor--timerange.el-input,
.formContent .el-date-editor--timerange.el-input__inner,
.grid-search-form .el-date-editor--daterange.el-input,
.grid-search-form .el-date-editor--daterange.el-input__inner,
.grid-search-form .el-date-editor--timerange.el-input,
.grid-search-form .el-date-editor--timerange.el-input__inner {
  width: 100%;
}

// 日期选择按钮太小问题（gcommon ui）
.el-picker-panel__footer .el-button--mini {
  font-size: 16px;
}

// 显示必填标志
.is_req {
  .required__label::before {
    content: '*';
    color: #f56c6c;
    margin-right: 4px;
  }
}

.formContent .el-form-item {
  margin-bottom: 0;
}

.grid-operation-buttons {
  display: inline-flex;
  flex-wrap: wrap;
  // 用 gap 控制按钮间距，只有真正参与布局的按钮才会产生间隙
  gap: var(--super-grid-main-btn-view-gap, 10px);

  &>.el-button {
    margin: 0;

    &~.el-button {
      margin: 0;
    }
  }
}

// 内容为空的操作按钮容器不参与布局（例如权限过滤、showBtn 隐藏后剩下的空 span），
// 避免撑出多余间距导致按钮错位
.buttons-row-content-span:empty {
  display: none;
}

.button-at-top {
  width: 100%;
  background: rgb(255, 255, 255);
  line-height: 72px;
  height: 72px;
  position: absolute;
  z-index: 100;
  top: 0px;
  left: 0px;
  right: 0px;
}

.button-at-bottom {
  width: 100%;
  background: rgb(255, 255, 255);
  line-height: 72px;
  height: 72px;
  position: absolute;
  bottom: 0px;
  z-index: 100;
  left: 0px;
  right: 0px;
}

.form-top-button {
  height: 72px;
  float: left;
  padding-left: 24px;
  line-height: 72px;
}

.form-bottom-button {
  height: 72px;
  float: right;
  padding-right: 24px;
  line-height: 72px;
}

// 带有tab页签的表单高度
.tab-form-container {
  height: calc(100vh - 190px);
  overflow: auto;
}

.form-container {
  height: calc(100vh - 90px);
  overflow: auto;
}

.form-container .el-form .el-card {
  margin-bottom: 10px;
}

.form-container .el-form .el-card:last-child {
  margin-bottom: 0;
}

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

// v10图表样式
.amb-widget-chart {
  --el-card-border-color: var(--el-border-color-light);
  --el-card-border-radius: 4px;
  --el-card-padding: 20px;
  --el-card-bg-color: var(--el-fill-color-blank);
  background-color: var(--el-card-bg-color);
  border: 1px solid var(--el-card-border-color);
  border-radius: var(--el-card-border-radius);
  color: var(--el-text-color-primary);
  overflow: hidden;
  transition: var(--el-transition-duration);
  box-shadow: var(--el-box-shadow-light);
}

.amb-widget-chart.amb-chart-table {
  box-shadow: none;
}

.amb-widget-flex {
  display: flex;
  flex-direction: column
}

.amb-chart-container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.amb-chart-header {
  flex-shrink: 0;
}

.amb-chart-content {
  /* 图表区域占据剩余空间 */
  flex: 1;
  /* 允许内容缩小 */
  min-height: 0;
}

.amb-widget-chart-header {
  border-bottom: 1px solid var(--el-card-border-color);
  padding: 6px 10px;
  display: flex;
  min-height: 36px;
}

.amb-widget-chart-header-item {
  display: flex;
  align-items: center;
}

.amb-widget-chart-header-center {
  flex-grow: 1;
  text-align: center;
  vertical-align: middle;
  justify-content: center;
}


/* 分隔组件 */
.amb-widget-separatelabel {
  --el-card-border-color: var(--el-border-color-light);
  --el-card-border-radius: 4px;
  --el-card-padding: 20px;
  --el-card-bg-color: var(--el-fill-color-blank);
  background-color: var(--el-card-bg-color);
  /* border: 1px solid var(--el-card-border-color); */
  border-bottom: 1px solid var(--el-card-border-color);
  border-radius: var(--el-card-border-radius);
  color: var(--el-text-color-primary);
  overflow: hidden;
  transition: var(--el-transition-duration);
  /* box-shadow: var(--el-box-shadow-light); */
  padding: 10px;
  padding-left: 0px;
  margin-bottom: 18px;
  display: flex;
  // justify-content: center;
  /* 水平居中 */
  align-items: center;
}

.amb-widget-separatelabel>.label {
  /* border-left: 4px solid #5893ef; */
  border-bottom: 2px solid #5893ef;
  color: #5893ef;
  display: inline-block;
  padding-left: 6px;
  padding-right: 6px;
  padding-bottom: 10px;
  /* font-size: 14px; */
  margin-bottom: -8px;
  display: flex;
  align-items: center;
  /* 确保图标和文字垂直居中 */
}

.amb-widget-form-title {
  font-size: 22px;
  // padding: 10px;
  font-weight: bold;
}

.dec-page-main {
  padding: var(--dec-page-main-padding, 15px);
}

// 必填背景色
.required_bg {
  background-color: #fff3e0 !important;
  border-left: 4px solid #ff9800 !important;
  padding: 10px;
  display: block;
}

// 移动端必填背景色
.mobile_required_bg {
  background-color: #fff3e0 !important;
  border-left: 4px solid #ff9800 !important;
  padding: 10px;
  display: block;
}

// 必填时右上角标样式
.required-corner::after {
  content: "*";
  color: #e74c3c;
  font-size: 18px;
  font-weight: bold;
  position: absolute;
  top: 3px;
  right: 5px;
}

// 表单项标签过长时换行
.amb-form-item-label {
  white-space: normal;
  word-break: break-all;
}


// "暂无更多" 样式
.empty_center_area {
  width: 100%;
  position: relative;

  .empty_notAvailable {
    background-image: url('../assets/nonemessage.png');
    background-size: 100%;
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%);

    .empty_notAvailable_text {
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translate(-50%, 100%);
      color: #313233;
      font-weight: regular;
      font-size: 14px;
    }
  }
}

// select 禁用时候的背景色
.el-select__wrapper.is-disabled {
  background-color: var(--el-disabled-bg-color);
}