.hb-layout {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  overflow: hidden;
}

/* north区域 */
.hb-layout-north {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid #e8e8e8;
  overflow: hidden;
}

/* south区域 */
.hb-layout-south {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  border-top: 1px solid #e8e8e8;
  overflow: hidden;
}

/* 中间区域 */
.hb-layout-middle {
  flex: 1;
  display: flex;
  flex-direction: row;
  overflow: hidden;
  min-height: 0;
}

/* west区域 */
.hb-layout-west {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  border-right: 1px solid #e8e8e8;
  overflow: hidden;
}

/* center区域 */
.hb-layout-center {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
}

/* east区域 */
.hb-layout-east {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  border-left: 1px solid #e8e8e8;
  overflow: hidden;
}

/* 头部 */
.hb-layout-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 12px;
  background: #fff;
  border-bottom: 1px solid #e8e8e8;
  cursor: pointer;
  user-select: none;
  flex-shrink: 0;

  .hb-layout-title {
    font-size: 16px;
    font-weight: 500;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .hb-layout-collapse-btn {
    font-size: 12px;
    color: #1890ff;
    white-space: nowrap;
    flex-shrink: 0;
    margin-left: 8px;

    &:hover {
      color: #40a9ff;
    }
  }
}

/* 垂直方向头部（左右收起时） */
.hb-layout-header-vertical {
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  height: auto;
  width: 36px;
  padding: 8px 4px;
  gap: 8px;

  .hb-layout-title-vertical {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    font-size: 14px;
    font-weight: 500;
    color: #333;
    white-space: nowrap;
    letter-spacing: 4px;
  }

  .hb-layout-collapse-btn {
    font-size: 12px;
    color: #1890ff;
    margin-left: 0;

    &:hover {
      color: #40a9ff;
    }
  }
}

/* 内容体 */
.hb-layout-body {
  flex: 1;
  overflow: auto;
  padding: 12px;
  min-height: 0;
  min-width: 0;
}