@import '../icons/fonts/iconfont.css';

:root {
  --hvac-layout-bg: #f5f7fa;
}

.use-guide-title {
  font-size: 20px;
  font-weight: 500;
  line-height: 28px;
  color: var(--antd-color-text);
}

.use-guide-description {
  width: 430px;
  margin: 10px 0;
  font-size: 14px;
  line-height: 22px;
  color: var(--antd-color-text-secondary);
}

.hvac-layout-main-title {
  height: 32px;
  font-size: 20px;
  font-weight: 500;
  line-height: 32px;
  color: var(--antd-color-text);
}

.hvac-tooltip {
  max-width: 450px;

  .ant-tooltip-inner {
    white-space: pre-wrap;
  }
}

.hvac-modal {
  .ant-modal-header {
    margin-bottom: 24px;
  }

  .ant-modal-footer {
    margin-top: 24px;
  }
}

.hvac-input-number {
  .ant-input-number-group-addon {
    color: #333;
    background-color: #fff;
  }
}

.hvac-table.ant-table-wrapper .ant-table-container {
  .ant-table-thead > tr > th {
    font-weight: 600;
    color: #000;
    background: #f5f6f7;
    border-bottom: none;
  }

  .ant-table-header {
    border-radius: 0;
  }

  table > thead > tr:first-child > {
    *:first-child {
      border-start-start-radius: 0;
    }

    *:last-child {
      border-start-end-radius: 0;
    }
  }

  .ant-table-thead
    > tr
    > th.ant-table-cell:not(:last-child, .ant-table-selection-column, .ant-table-row-expand-icon-cell, [colspan]) {
    &::before {
      background-color: transparent;
    }

    &.table-column-item-required::before {
      position: initial;
      width: auto;
      font-size: 14px;
      line-height: 24px;
      color: #f56c6c;
      content: '*';
      transform: initial;
    }
  }

  .ant-table-column-sorters,
  .ant-table-filter-column {
    justify-content: flex-start;

    > .ant-table-column-title {
      flex: none;
    }
  }
}

.hvac-table-tree.ant-table-wrapper .ant-table-container {
  .ant-table-thead > tr > th:first-child {
    padding-left: 64px;
  }

  .ant-table-tbody > tr > td,
  tfoot > tr > th,
  tfoot > tr > td {
    &:first-child {
      padding-left: 32px;
    }
  }

  .ant-table-row-indent + .ant-table-row-expand-icon {
    margin-inline-end: 16px;
    border-color: #d6d6d6;
    border-radius: 4px;

    &:focus,
    &:hover,
    &:active {
      border-color: var(--antd-color-primary);
    }
  }
}

// 默认按钮颜色
.default-button {
  color: var(--antd-color-primary-hover);
  border-color: var(--antd-color-primary-hover);
}

.ant-btn {
  border-radius: 4px;
}

.main-container {
  overflow: auto; // 超出设定高度，出现滚动条

  /* 定义滚动条宽高及背景，宽高分别对应横竖滚动条的尺寸 */
  // 滚动条整体部分
  &::-webkit-scrollbar {
    width: 6px;
    height: 8px;
  }

  // 滚动条的轨道的两端按钮，允许通过点击微调小方块的位置。
  &::-webkit-scrollbar-button {
    display: none;
  }

  // 滚动条里面的小方块，能向上向下移动（或往左往右移动，取决于是垂直滚动条还是水平滚动条）
  &::-webkit-scrollbar-thumb {
    cursor: pointer;
    background: rgb(144 147 153 / 30%);
    border-radius: 4px;
  }

  // 边角，即两个滚动条的交汇处
  &::-webkit-scrollbar-corner {
    display: none;
  }

  // 两个滚动条的交汇处上用于通过拖动调整元素大小的小控件
  &::-webkit-resizer {
    display: none;
  }
}

.ellipsis-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.icon-button {
  font-size: 16px;

  i {
    vertical-align: -0.15em;
  }

  span {
    margin-left: 8px;
  }
}

.hide-tabs-border > div.ant-tabs-nav::before {
  border: none;
}

.button-tabs-card {
  font-size: 14px;
  font-weight: 500;
  line-height: 22px;
  color: var(--antd-color-primary);

  &.ant-tabs-card > div.ant-tabs-nav {
    .ant-tabs-tab {
      padding: 5px 12px;
      background: var(--antd-color-primary-opacity-15);
      border: none;
      border-radius: 4px;
      transition: background 0.3s;

      + .ant-tabs-tab {
        margin-left: 8px;
      }

      &:hover {
        color: #fff !important;
        background: var(--antd-color-primary);
      }

      &:active {
        background: var(--antd-color-primary-active);
      }
    }

    .ant-tabs-tab-active {
      background: var(--antd-color-primary);

      .ant-tabs-tab-btn {
        color: #fff;
        text-shadow: none;
      }
    }

    .ant-tabs-tab-btn:active {
      color: #fff;
    }

    &::before {
      border: none;
    }
  }
}

.button-tabs-compact {
  line-height: 22px;

  &.ant-tabs-card > div.ant-tabs-nav {
    .ant-tabs-tab {
      padding: 8px 16px;
      font-size: 16px;
      font-weight: 500;
      color: var(--antd-color-primary);
      background: rgb(255 255 255 / 15%);
      border-color: var(--antd-color-primary);
      border-right: none;
      border-radius: 0;
      transition: background 0.3s;

      + .ant-tabs-tab {
        margin-left: 0;
      }

      &:first-child {
        border-top-left-radius: 8px;
        border-bottom-left-radius: 8px;
      }
    }

    .ant-tabs-nav-list :nth-last-child(2) {
      border-right: 1px solid var(--antd-color-primary);
      border-top-right-radius: 8px;
      border-bottom-right-radius: 8px;
    }

    .ant-tabs-tab-active {
      background: var(--antd-color-primary);

      .ant-tabs-tab-btn {
        color: #fff;
        text-shadow: none;
      }
    }

    &::before {
      border: none;
    }
  }
}

.status-dot {
  // 定义控制变量 (可外部覆盖)
  --status-dot-rgb: 191, 191, 191; // RGB 颜色分量 (灰色)

  position: relative;
  display: inline-block;
  width: 16px;
  aspect-ratio: 1; // 保持 1:1 宽高比
  background-color: rgba(var(--status-dot-rgb), 0.3);
  border-radius: 50%;

  // 同心圆通用样式
  &::before,
  &::after {
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    aspect-ratio: 1;
    content: '';
    border-radius: 50%;
    transform: translate(-50%, -50%);
  }

  // 中间层
  &::before {
    width: 50%;
    background-color: rgba(var(--status-dot-rgb), 0.6);
  }

  // 核心层
  &::after {
    width: 25%;
    background-color: rgba(var(--status-dot-rgb), 1);
  }
}

.status-dot-green {
  --status-dot-rgb: 103, 194, 58; // RGB 颜色分量 (绿色)
}

.center-loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.echarts-tooltip-electricity {
  width: 100%;
  font-weight: bold;
  border-collapse: collapse;

  th,
  td {
    padding-inline: 3px;
    text-align: left;
  }
}

.corner-border {
  --corner-size: 4px;
  --corner-offset: -1px;
  --corner-border-width: 1px;
  --corner-border-color: #979797;
  --corner-border-style: var(--corner-border-width) solid var(--corner-border-color);

  position: absolute;
  width: var(--corner-size);
  height: var(--corner-size);

  &.lt-border {
    top: var(--corner-offset);
    left: var(--corner-offset);
    border-top: var(--corner-border-style);
    border-left: var(--corner-border-style);
  }

  &.rt-border {
    top: var(--corner-offset);
    right: var(--corner-offset);
    border-top: var(--corner-border-style);
    border-right: var(--corner-border-style);
  }

  &.lb-border {
    bottom: var(--corner-offset);
    left: var(--corner-offset);
    border-bottom: var(--corner-border-style);
    border-left: var(--corner-border-style);
  }

  &.rb-border {
    right: var(--corner-offset);
    bottom: var(--corner-offset);
    border-right: var(--corner-border-style);
    border-bottom: var(--corner-border-style);
  }
}
