/**
 * css 书写规范
 * https://alidocs.dingtalk.com/i/nodes/Mk5evdR04jBV523gq4AgJQL3x2OlParn
 */

.ai-table {
  &-container {
    height: 100%;
    max-height: 100vh;
    overflow: auto;
    background-color: transparent;
    position: relative;
    border-radius: var(--cnai-radius-sm, 4px);
    // box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.02);
  }

  &-table {
    width: 100%;
    table-layout: fixed;
    border-collapse: separate; // 改为 separate 以支持圆角
    border-spacing: 0; // 设置间距为 0，保持视觉效果与 collapse 一致
    background-color: var(--cnai-color-bg-base, #fff);
    border: none;

    // 整块表头叠在表体之上，避免纵向滚动时 tbody 的 box-shadow/底色盖住 thead（尤其冻结列表头右侧阴影）
    thead {
      position: relative;
      z-index: 2;
    }

    tbody {
      position: relative;
      z-index: 1;
    }

    tfoot {
      position: relative;
      z-index: 1;
    }
  }

  // ============================================================================
  // 2.2 表头单元格
  // ============================================================================

  &-header-cell {
    padding: 0 12px;
    text-align: left;
    font-weight: 500;
    font-size: 12px;
    color: var(--cnai-table-header-color, #262626);
    white-space: nowrap;
    transition: background-color 0.2s ease;
    border-right: 1px solid var(--cnai-color-border-light, #f0f0f0);
    border-bottom: 1px solid var(--cnai-color-border-light, #f0f0f0);
    border-top: 1px solid var(--cnai-color-border-light, #f0f0f0);
    border-left: none;
    background-color: var(--cnai-color-bg-base, #fff);
    position: sticky;
    top: 0;
    z-index: 10;
    overflow: hidden;

    // 禁用文本选择
    user-select: none;
    -webkit-user-select: none;

    &:first-child:not(.ai-table-action-column-header) {
      border-left: 1px solid var(--cnai-color-border-light, #f0f0f0);
    }

    &.ai-table-action-column-header {
      border-top-left-radius: var(--cnai-radius-sm, 4px);
      border-left: 1px solid var(--cnai-color-border-light, #f0f0f0);
      border-right: 1px solid var(--cnai-color-border-light, #f0f0f0);
      isolation: isolate;
      // 确保不会因为 first-child 而重复设置左边框
    }

    &.ai-table-operate-column-header {
      border-top-right-radius: var(--cnai-radius-sm, 4px);
      border-left: none;
    }

    &.ai-table-column-selected {
      background-color: var(--cnai-color-bg-selected-alt, #f0f5ff);
      border-color: var(--cnai-color-border-base, #e7e8ed);
    }
  }

  // ============================================================================
  // 2.3 数据单元格
  // ============================================================================

  &-data-cell {
    padding: 0 12px;
    text-align: left;
    font-size: 12px;
    color: var(--cnai-table-cell-color, #595959);
    background:
      var(--cell-fill-bg, none), var(--cell-follow-bg, none), var(--cnai-color-bg-base, #fff);
    transition:
      background-color 0.2s ease,
      border-color 0.2s ease;

    border-right: 1px solid var(--cnai-color-border-light, #f0f0f0);
    border-bottom: 1px solid var(--cnai-color-border-light, #f0f0f0);
    border-top: none;
    border-left: none;

    &:first-child:not(.ai-table-action-column) {
      border-left: 1px solid var(--cnai-color-border-light, #f0f0f0);
    }

    &.ai-table-action-column {
      border-left: 1px solid var(--cnai-color-border-light, #f0f0f0);
      border-right: 1px solid var(--cnai-color-border-light, #f0f0f0);
    }

    &.ai-table-column-selected {
      background:
        var(--cell-fill-bg, none), var(--cell-follow-bg, none),
        var(--cnai-color-bg-selected-alt, #f0f5ff);
      border-color: var(--cnai-color-border-base, #e7e8ed);
    }

    // 只读状态：保持黑色文字，不降低透明度
    &.ai-table-cell-readonly {
      .ai-table-cell-content {
        cursor: default;
        user-select: text;
      }
    }

    &.ai-table-cell-selected {
      outline: none !important;
      box-shadow: inset 0 0 0 2px var(--cnai-table-cell-selected-border, #000000);
    }

    &.ai-table-cell-editing {
      overflow: hidden;
      outline: none !important;
      box-shadow: inset 0 0 0 2px var(--cnai-color-link, #1890ff);
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    &.ai-table-cell-editing-ai {
      outline: none !important;
      box-shadow: inset 0 0 0 2px var(--cnai-table-cell-editing-ai-border, #9333ea);
    }
  }

  &-row:last-child {
    .ai-table-action-column {
      border-bottom-left-radius: var(--cnai-radius-sm, 4px);
    }

    .ai-table-operate-column-cell {
      border-bottom-right-radius: var(--cnai-radius-sm, 4px);
    }
  }

  // ============================================================================
  // 2.4 单元格内容
  // ============================================================================

  &-cell-content-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
  }

  &-cell-content {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin: 0;
    cursor: pointer;

    .ai-table-sticky-column & {
      max-width: 100%;
      box-sizing: border-box;
    }
  }

  // ============================================================================
  // 2.5 表头内容
  // ============================================================================

  &-header-content {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    padding-right: 8px;

    // 字段图标
    img {
      width: 16px;
      height: 16px;
      flex-shrink: 0;
    }

    span {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }

  // ============================================================================
  // 2.6 列宽拖拽手柄
  // ============================================================================

  &-column-resize-handle {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 8px;
    cursor: col-resize;
    z-index: 1;
    user-select: none;
    touch-action: none;

    &::after {
      content: '';
      position: absolute;
      top: 0;
      bottom: 0;
      right: 0;
      width: 2px;
      background-color: transparent;
      transition: background-color 0.15s;
    }

    &:hover::after,
    &--active::after {
      background-color: var(--cnai-color-link, #1890ff);
    }
  }

  // ============================================================================
  // 2.7 修饰符类
  // ============================================================================

  &-column-selected {
    background-color: var(--cnai-color-bg-selected-alt, #f0f5ff);
  }

  // 列拖拽悬停状态
  &-column-drag-over {
    position: relative;

    &::after {
      content: '';
      position: absolute;
      top: 0;
      right: -1px;
      bottom: 0;
      width: 2px;
      background-color: var(--cnai-color-link, #1890ff);
      z-index: 100;
    }
  }
}

// ============================================================================
// 4. AI 生成中状态样式
// ============================================================================

.ai-generating-text {
  color: #8c8c8c;
  font-style: italic;
  font-size: 12px;
}
