// 复用 systemNavMana 的布局风格
.SystemNavMana {
  display: flex;
  flex-direction: row;
  background: #F5F7FA;

  .leftTree {
    width: 220px;
    height: calc(100vh - 80px);
    background: #FFF;
    border-radius: 4px;
    overflow: hidden;
    margin-right: 16px;
    .search { padding: 16px; display:flex; align-items:center; gap:8px; }
    .search .add {
      cursor: pointer;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 24px;
      height: 24px;
      background: #FAFCFF;
      border-radius: 4px;
      border: 1px solid #DAE2F2;
      flex: 0 0 24px;
      min-width: 24px;
    }
    .searchInput { border: 1px solid #CFD7E6; flex: 1; min-width: 0; }
    .add { cursor: pointer; display: flex; justify-content: center; align-items: center; width: 24px; height: 24px; background: #FAFCFF; border-radius: 4px;border: 1px solid #DAE2F2;}
    .treeeWrap { height: calc(100% - 50px); overflow-y: scroll; padding: 16px; padding-top: 0;padding-right: 8px; }
    // 选中与悬浮样式还原
    .kcmp-ant-tree.kcmp-ant-tree-directory .kcmp-ant-tree-treenode {
      margin-bottom: 2px !important;
      padding-bottom: 0;
      &:hover { border-radius: 4px !important; background: #F0F2F5; }
      &::before { bottom: 0 !important; }
    }
    // 悬浮到右侧新增图标时，不触发行背景高亮；但图标自身hover需要有背景
    .kcmp-ant-tree-node-content-wrapper:hover .node-title-area + span:not(:hover) { background: transparent !important; }
    .inline-add { cursor: pointer; width: 20px; height: 20px; border-radius: 4px; }
    .inline-add:hover { background: #DAE2F2; }
    .kcmp-ant-tree.kcmp-ant-tree-directory .kcmp-ant-tree-treenode-selected:hover::before,
    .kcmp-ant-tree.kcmp-ant-tree-directory .kcmp-ant-tree-treenode-selected::before { border-radius: 4px; background: #F0F2F5; }
    .kcmp-ant-tree.kcmp-ant-tree-directory .kcmp-ant-tree-treenode .kcmp-ant-tree-node-content-wrapper.kcmp-ant-tree-node-selected { font-weight: 500; color:#17181A; }
    // 缩进与展开图标位置
    .kcmp-ant-tree.kcmp-ant-tree-directory .kcmp-ant-tree-treenode .kcmp-ant-tree-indent .kcmp-ant-tree-indent-unit { width: 8px !important; }
    .kcmp-ant-tree.kcmp-ant-tree-directory .kcmp-ant-tree-treenode .kcmp-ant-tree-switcher > span { top: 7px !important; }
  }

  .rightContent {
    position: relative;
    border-radius: 4px;
    width: calc(100% - 220px);
    padding: 16px;
    background: #FFF;

    .tableToolbar {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 16px;
      gap: 16px;
      .filter { 
        display: flex; 
        flex-direction: row; 
        align-items: center;
        flex: 1;
        min-width: 0;
      }
      .filter .filterItem { 
        display: flex; 
        flex-direction: row; 
        align-items: center; 
      }
      
      .btnGroup {
        display: flex;
        flex-direction: row;
        align-items: center;
        flex-shrink: 0;
        min-width: max-content;
        
        span {
          box-sizing: border-box;
          cursor: pointer;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          font-size: 14px;
          font-family: SourceHanSansCN-Normal, SourceHanSansCN;
          font-weight: 400;
          color: #17181A;
          border: 1px solid #DAE2F2;
          height: 26px;
          min-height: 26px;
          padding: 0 14px;
          background: #FAFCFF;
          border-radius: 4px;
          white-space: nowrap;
          flex-shrink: 0;
          width: auto !important;
          max-width: none !important;
        }

        .collapse {
          margin-right: 8px;
        }

        .add {
          color: #FFFFFF;
          background: #3377FF;
          border: 1px solid #3377FF;
        }
      }
    }
  }
}

.KC-DirectoryTree .kcmp-ant-tree-list { height: 100%; }

// 选项子表样式
.SE-SubTitle { font-weight: 600; }
.SE-OptionsWrap { padding: 12px 8px; background: #fafbfd; border: 1px solid #dae2f2; border-radius: 4px; }
.SE-OptionsHeader { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.SE-OptionsTable { width: 100%; }
.SE-OptionsRow { display: grid; grid-template-columns: 60px 140px 1fr 160px 100px; align-items: center; min-height: 40px; border-top: 1px solid #eff2f7; }
.SE-OptionsHead { background: #f7f9fc; border-top: none; }
.SE-OptionsRow .col { padding: 6px 8px; }
.SE-Empty { padding: 8px; color: #a3adbf; }

// 展开区内嵌表格容器，避免覆盖外层行
.SE-ExpandWrap {
  padding: 8px 8px 8px 12px;
  margin-left: 48px; // 缩进，便于层次识别
  background: #FAFBFD;
  border-left: 1px solid #DAE2F2; // 仅保留左侧引导线
  border-top: 0;
  border-right: 0;
  border-bottom: 0;
  border-radius: 0;
  overflow: hidden; // 防止内表格边框/阴影越界覆盖外层
  user-select: none; // 避免拖拽时选中文本影响体验

  // 覆盖内嵌 KCTable 的外边框，避免双层边框
  .KCTable {
    border: 0 !important;
  }
}

// 添加服务 - Transfer 样式修正
.ServiceTransfer {
  width: 100%;
  display: flex;
  .kcmp-ant-transfer-list {
    flex: 1;
    min-width: 0;
  }
  .kcmp-ant-transfer-operation {
    display: flex;
    align-items: center;
    margin: 0 12px;
  }
}