@import '~ant-design-vue/es/style/themes/default.less';

html,
body,
#app,
#root {
  height: 100%;
}

.height-fill {
  height: 100%;
}

.bg-white {
  background: #fff;
}

.colorWeak {
  filter: invert(80%);
}

.ant-layout.layout-basic {
  height: 100vh;
  min-height: 100vh;
}

canvas {
  display: block;
}

body {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

ul,
ol {
  list-style: none;
}

// 数据列表 样式
.table-alert {
  margin-bottom: 16px;
}

// 数据列表 操作
.table-operator {
  margin-bottom: 18px;

  button {
    margin-right: 8px;
  }
}

// 导出组件选择框
#export-checkbox-group .ant-checkbox-group-item {
  box-sizing: border-box;
  width: 33.33333333%;
  min-height: 1px;
  font-weight: 700;
  margin: 2px 0;
}

#XAddNativeForm {
  // 日期选择框的样式
  .ant-calendar-picker {
    min-width: 0 !important;
    width: 100% !important;
  }
}

// 数据列表 搜索条件 form表单样式
.table-page-search-wrapper {
  .ant-form-inline {
    .ant-form-item {
      display: flex;
      margin-top: 12px;

      .ant-form-item-control-wrapper {
        flex: 1 1;
        display: inline-block;
        vertical-align: middle;
      }

      > .ant-form-item-label {
        line-height: 32px;
        padding-right: 8px;
        width: auto;
        // 保留lable文本中的空格和换行
        > label {
          white-space: pre;
        }
      }

      .ant-form-item-control {
        height: 32px;
        line-height: 32px;
      }
    }
  }

  // 日期选择框的样式
  .ant-calendar-picker {
    min-width: 0;
    width: 100% !important;
  }

  .table-page-search-submitButtons {
    display: block;
    margin: 12px 0;
    float: right;
    white-space: nowrap;
    // 按钮间隔
    .detailed-condition ~ button {
      margin-left: 8px;
    }
  }
}

.ant-checkbox-inner,
.ant-checkbox-input,
.ant-checkbox {
  width: 20px;
  height: 20px;
}

.el-checkbox__inner {
  width: 16px !important;
  height: 16px !important;
  margin-top: 1px;
}

.el-checkbox__inner::after {
  height: 9px !important;
  left: 5px !important;
}
.el-checkbox__inner::before {
  top: 6px !important;
}

.el-checkbox__input .is-checked {
  display: flex;
  align-items: center;
  justify-content: center;
}

.ant-layout-footer {
  display: none;
}

// STable 表格行样式 - 同时应用于主表格和固定列
.ant-table-tbody,
.ant-table-fixed-left .ant-table-tbody,
.ant-table-fixed-right .ant-table-tbody {
  // 统一为所有行添加平滑过渡效果
  tr {
    transition: background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1);

    td {
      transition: background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    }
  }

  // 成功样式 - 绿色
  .row-style-success {
    background-color: rgba(82, 196, 26, 0.1) !important;

    // 使用 Ant Design 自动添加的 .ant-table-row-hover 类名
    &.ant-table-row-hover,
    &.row-clicked {
      background-color: rgba(82, 196, 26, 0.2) !important;
    }

    td {
      background-color: transparent !important;
    }

    // 超链接样式 - 使用更深的绿色
    a {
      color: #389e0d !important; // 深绿色
      transition: color 0.2s ease;

      &:hover {
        color: #237804 !important; // 更深的绿色
        text-decoration: underline;
      }

      &:active {
        color: #135200 !important; // 最深的绿色
      }
    }
  }

  // 警告样式 - 黄色
  .row-style-warning,
  .row-style-warn {
    background-color: rgba(250, 173, 20, 0.1) !important;

    &.ant-table-row-hover,
    &.row-clicked {
      background-color: rgba(250, 173, 20, 0.2) !important;
    }

    td {
      background-color: transparent !important;
    }

    // 超链接样式 - 使用更深的橙黄色
    a {
      color: #d48806 !important; // 深橙黄色
      transition: color 0.2s ease;

      &:hover {
        color: #ad6800 !important; // 更深的橙黄色
        text-decoration: underline;
      }

      &:active {
        color: #874d00 !important; // 最深的橙黄色
      }
    }
  }

  // 错误/危险样式 - 红色
  .row-style-error,
  .row-style-danger {
    background-color: rgba(245, 34, 47, 0.1) !important;

    &.ant-table-row-hover,
    &.row-clicked {
      background-color: rgba(245, 34, 47, 0.2) !important;
    }

    td {
      background-color: transparent !important;
    }

    // 超链接样式 - 使用更深的红色
    a {
      color: #cf1322 !important; // 深红色
      transition: color 0.2s ease;

      &:hover {
        color: #a8071a !important; // 更深的红色
        text-decoration: underline;
      }

      &:active {
        color: #820014 !important; // 最深的红色
      }
    }
  }

  // 魔法样式 - 紫色
  .row-style-magic {
    background-color: rgba(114, 46, 209, 0.1) !important;

    &.ant-table-row-hover,
    &.row-clicked {
      background-color: rgba(114, 46, 209, 0.2) !important;
    }

    td {
      background-color: transparent !important;
    }

    // 超链接样式 - 使用更深的紫色
    a {
      color: #531dab !important; // 深紫色
      transition: color 0.2s ease;

      &:hover {
        color: #391085 !important; // 更深的紫色
        text-decoration: underline;
      }

      &:active {
        color: #22075e !important; // 最深的紫色
      }
    }
  }

  // 默认信息样式
  .row-style-info {
    &.ant-table-row-hover,
    &.row-clicked {
      // 使用主题色的 10% 透明度
      background-color: fade(@primary-color, 10%) !important;
    }

    td {
      background-color: transparent !important;
    }
  }
}

@media (max-width: @screen-xs) {
  .ant-table {
    width: 100%;
    overflow-x: auto;

    &-thead > tr,
    &-tbody > tr {
      > th,
      > td {
        white-space: pre;

        > span {
          display: block;
        }
      }
    }
  }
}

span {
  svg {
    display: block !important;
  }
}

button {
  svg {
    display: inline-block !important;
  }
}

i {
  svg {
    display: block !important;
  }
}

.ant-table {
  color: rgba(0, 0, 0, 0.8) !important;
}
