/**
 * css 书写规范
 * https://alidocs.dingtalk.com/i/nodes/Mk5evdR04jBV523gq4AgJQL3x2OlParn
 */
@import '~@cainiaofe/cn-ui-theme-light/token.scss';

.cn-mutiply-ai-table-container {
  width: 100%;
  height: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative; // 确保分页组件可以相对于此容器定位
  border-radius: var(--cnai-radius-md, 8px);
  box-shadow: var(--cnai-shadow-md, 0 0 5px 0 rgba(0, 0, 0, 0.08));
}

.cn-mutiply-ai-table-content {
  display: flex;
  flex: 1;
  width: 100%;
  overflow: hidden;
  min-height: 0; // 允许 flex 子元素缩小
}

.cn-mutiply-ai-table-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden; // 禁止外层容器滚动，让表格容器内部处理滚动
  position: relative;
  min-height: 0; // 允许 flex 子元素缩小
}

// 表格内容区域样式（工具栏+表格）
.ai-table-content-area {
  display: flex;
  flex-direction: column;
  padding: 8px 8px 0 8px;
  gap: 8px;
  align-self: stretch;
  z-index: 0;
  box-shadow: var(--cnai-shadow-sm, 0 0 5px 0 rgba(0, 0, 0, 0.05));
}

.cn-mutiply-ai-table-container--no-tabs {
  .ai-table-content-area {
    background: #fff;
  }

  // 无 tab 时 ViewComponent 直挂 main，需要补一份与 .cn-mutiply-ai-table-tab 等价的高度链，
  // 否则表格滚动容器拿不到边界，垂直滚动失效
  .cn-mutiply-ai-table-main > .ai-table-content-area {
    flex: 1;
    height: 100%;
    min-height: 0;

    > .cn-next-loading {
      height: calc(100% - 42px);
      min-height: 0;

      > .cn-next-loading-wrap {
        height: 100%;
      }
    }
  }
}

// Tab 切换栏吸顶
.cn-mutiply-ai-table-tab-sticky {
  position: sticky;
  top: 0;
  z-index: 30;
  height: 100%;
}

.cn-mutiply-ai-table-ai-agent {
  width: 360px;
  height: 100%;
  margin-left: 16px;
  flex-shrink: 0;
}

.cn-mutiply-ai-table-button-group {
  display: flex;
  gap: 8px;
}

.cn-ai-table-tab-title {
  display: flex;
  align-items: center;
  gap: 6px;
  position: relative;

  &-icon {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    color: #666;
  }

  &.cn-ai-table-tab-title-active &-icon {
    color: var(--cnai-color-brand-primary, #4161fd);
  }

  &-text {
    flex: 1;
    font-size: 14px;
    color: var(--cnai-color-text-secondary, #666);
  }

  // 选中状态下文字为黑色
  &.cn-ai-table-tab-title-active &-text {
    color: var(--cnai-color-text-primary, #333);
  }

  .cn-ai-table-tab-menu-icon {
    opacity: 0;
    transition: opacity 0.2s;
    cursor: pointer;
    color: #666;
    padding: 2px 4px;
    border-radius: 4px;

    &:hover {
      background-color: #f5f5f5;
      color: #333;
    }
  }

  // 选中的 tab 上的图标始终显示
  &.cn-ai-table-tab-title-active .cn-ai-table-tab-menu-icon {
    opacity: 1;
  }

  &:hover .cn-ai-table-tab-menu-icon {
    opacity: 1;
  }
}

// 分页组件容器样式
.cn-mutiply-ai-table-container .cn-mutiply-ai-table-pagination-wrapper {
  background: var(--cnai-color-bg-base, #fff);
  box-sizing: border-box;
  border-width: 1px 0 0 0;
  border-style: solid;
  border-color: var(--cnai-color-border-light, #f2f3f5);
  padding: 10px 10px;
}

// 解决高度自适应问题；同时保证 tab 内容区宽度铺满（避免智能跟单/任务视图在菜包下右侧留白）
.cn-mutiply-ai-table-tab {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  min-width: 0;
  > .cn-next-tabs-content {
    flex: 1;
    width: 100%;
    min-width: 0;
    > .cn-next-tabs-tabpane.active {
      height: 100%;
      width: 100%;
      min-width: 0;
      > .ai-table-content-area {
        height: 100%;
        > .cn-next-loading {
          height: calc(100% - 42px);
          > .cn-next-loading-wrap {
            height: 100%;
          }
        }
      }
      // 跟单视图高度自适应，且宽高铺满（CnLoading 内部可能再包一层，子节点也需铺满；预览态下右侧详情区需与运行态一致）
      > .cn-ui-loading {
        height: 100%;
        width: 100%;
        min-width: 0;
        display: block;
        > * {
          width: 100%;
          min-width: 0;
          height: 100%;
          min-height: 0;
        }
      }
    }
  }
}

// 鸟搭低码编辑态样式兼容
.ftp-view-wrapper {
  height: 100%;
  .ftp-wrap {
    height: 100%;
  }
}

// 菜包域名下：.cn-ui-form-layout 的 padding-bottom: 64px 会导致表格视图单元格编辑后布局异常
// 通过重复 .cn-ui-form-layout 提高特异性 (0,4,0) 覆盖宿主 (0,3,0)
.caibao-birda-shell .cn-one-page-layout-col .cn-ui-form-layout.cn-ui-form-layout {
  padding-bottom: 0;
}
