/**
 * DraggableRow 组件专属样式
 * 仅在 DraggableRow 中渲染/使用的规则
 *
 * css 书写规范
 * https://alidocs.dingtalk.com/i/nodes/Mk5evdR04jBV523gq4AgJQL3x2OlParn
 */

.ai-table {
  // ============================================================================
  // 1. 行级样式（仅 DraggableRow 使用）
  // ============================================================================

  &-row {
    // 智能跟单运行中的行 - 外边框样式
    // 通过给单元格添加边框来实现行的外边框效果
    // 使用渐变色模拟：左边 #5571FF，上下 #7963FF（中间色），右边 #4463FF
    &-special-border {
      // 所有单元格添加上下边框（无左右边框）
      // 背景色由 --cell-follow-bg CSS 变量驱动（设在 <tr> 上），
      // 通过 _table.scss / _features.scss 的叠层 background 自动生效，
      // 不再使用 !important 覆盖，避免与填色层冲突。
      > td {
        border-top: 2px solid var(--cnai-table-special-border-color, #7963ff) !important;
        border-bottom: 2px solid var(--cnai-table-special-border-color, #7963ff) !important;
        border-left: none !important;
        border-right: none !important;
      }

      // 第一个单元格（功能列）添加左边框和圆角
      > td:first-child {
        border-left: 2px solid var(--cnai-table-special-border-color, #5571ff) !important;
        border-top-left-radius: 4px;
        border-bottom-left-radius: 4px;
      }

      // 最后一个单元格添加右边框和圆角
      > td:last-child {
        border-right: 2px solid var(--cnai-table-special-border-color, #4463ff) !important;
        border-top-right-radius: 4px;
        border-bottom-right-radius: 4px;
      }

      // 左上角角标样式
      .ai-table-special-border-badge {
        position: absolute;
        top: 0;
        left: 0;
        width: 16px;
        height: 16px;
        z-index: 12;
        border-radius: 0 0 8px 0;
        background: var(--cnai-gradient-brand, linear-gradient(135deg, #a17dff 36%, #4b3bff 96%));
        display: flex;
        align-items: center;
        justify-content: center;

        img {
          width: 10px;
          height: 10px;
          margin: 0 2px 2px 0;
        }
      }

      // 如果后面紧跟着另一个特殊边框行，移除当前行的下边框圆角
      &:has(+ .ai-table-row-special-border) {
        > td:first-child {
          border-bottom-left-radius: 0;
        }

        > td:last-child {
          border-bottom-right-radius: 0;
        }
      }

      // 相邻特殊边框行：移除第二行的上边框和圆角，避免边框重叠
      & + .ai-table-row-special-border {
        > td {
          border-top: none !important;
        }

        > td:first-child {
          border-top-left-radius: 0;
        }

        > td:last-child {
          border-top-right-radius: 0;
        }

        // 相邻行不显示角标 TODO: 后续和设计确认
        .ai-table-special-border-badge {
          display: none;
        }
      }
    }

    // ========================================================================
    // 行选择样式
    // ========================================================================

    // 序号/多选框容器
    &-index-selection-wrapper {
      position: relative;
      height: 100%;
      width: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;

      // 序号 - 默认显示
      .ai-table-row-index {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        font-size: 12px;
        color: var(--cnai-color-text-tertiary, #999);
        user-select: none;
      }

      // 多选框 - 默认隐藏
      .ai-table-row-checkbox {
        display: none;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        cursor: pointer;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;

        // 当多选框被选中时，始终显示
        &.ai-table-row-checkbox-checked {
          display: flex;

          + .ai-table-row-index,
          ~ .ai-table-row-index {
            display: none;
          }
        }

        // 当有任何行被选中时，始终显示checkbox
        &.ai-table-row-checkbox-visible {
          display: flex;
        }

        // checkbox 组件样式调整
        .cn-ui-checkbox-wrapper {
          display: flex;
          align-items: center;
          justify-content: center;
        }

        // 禁用状态
        &.ai-table-row-checkbox-disabled {
          cursor: not-allowed;
          opacity: 0.5;
        }

        // Radio 组件样式调整
        .cn-ui-radio-wrapper {
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }

      // 当容器有 has-selection 类时，隐藏序号
      &.ai-table-row-has-selection {
        .ai-table-row-index {
          display: none;
        }

        .ai-table-row-checkbox {
          display: flex;
        }
      }

      // 选中时序号要隐藏
      &:has(.ai-table-row-checkbox-checked) {
        .ai-table-row-index {
          display: none;
        }

        .ai-table-row-checkbox {
          display: flex;
        }
      }
    }

    // 不显示序号时，直接显示选择框
    &-checkbox-only {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 32px;
      flex-shrink: 0;
      cursor: pointer;

      .cn-ui-checkbox-wrapper,
      .cn-ui-radio-wrapper {
        display: flex;
        align-items: center;
        justify-content: center;
      }

      // 禁用状态
      &.ai-table-row-checkbox-disabled {
        cursor: not-allowed;
        opacity: 0.5;
      }
    }

    // ========================================================================
    // 行拖拽样式
    // ========================================================================

    // 拖拽中的行样式
    &.dragging {
      opacity: 0.5;
      background-color: var(--cnai-table-hover-selected-bg, #f5f5f5) !important;

      .ai-table-data-cell {
        background-color: var(--cnai-table-hover-selected-bg, #f5f5f5) !important;
      }
    }

    // 拖拽悬停时显示蓝色底部边框
    &-drag-over {
      position: relative;

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

      // 所有单元格底部边框变蓝
      .ai-table-data-cell {
        border-bottom-color: var(--cnai-color-link, #1890ff);
      }
    }

    // 行拖拽把手样式
    &-drag-handle {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 28px;
      height: 100%;
      flex-shrink: 0;
      cursor: grab;
      user-select: none;
      transition: all 0.2s ease;
      color: var(--cnai-table-drag-handle-color, #bfbfbf);
      opacity: 0;

      &:hover {
        color: var(--cnai-table-header-color, #262626);
      }

      &:active {
        cursor: grabbing;
      }

      .cn-icon {
        font-size: 14px;
      }
    }
  }

  // ============================================================================
  // 2. 功能列数据单元格样式（仅 DraggableRow 渲染）
  // ============================================================================

  &-action-column {
    padding: 0;

    // 功能列内容容器
    &-content {
      display: flex;
      align-items: center;
      height: 100%;
    }

    // 功能列是固定列，需要确保边框正确显示
    &.ai-table-sticky-column {
      // 功能列需要显示左边框，覆盖固定列的 border-left: none
      border-left: 1px solid var(--cnai-table-border-color, var(--cnai-color-border-light, #f0f0f0));
      // 保持右边框，固定列的伪元素 ::after 会显示右边框
      border-right: 1px solid var(--cnai-table-border-color, var(--cnai-color-border-light, #f0f0f0));
    }

    // 确保功能列在 hover 时也有正确的背景色
    .ai-table-row:hover & {
      background-color: var(--cnai-table-hover-selected-bg, #f5f5f5) !important;
    }
  }

  // ============================================================================
  // 3. 操作列数据单元格样式（仅 DraggableRow 渲染）
  // ============================================================================

  &-operate-column {
    &-cell {
      position: sticky;
      right: 0;
      z-index: 9;
      background: var(--cell-fill-bg, none), var(--cell-follow-bg, none),
        var(--cnai-table-cell-bg, var(--cnai-color-bg-base, #fff));
      box-shadow:
        -2px 0 2px rgba(0, 0, 0, 0.04),
        12px 0 0 0 var(--cnai-table-cell-bg, var(--cnai-color-bg-base, #fff)),
        2px 0 4px rgba(0, 0, 0, 0.04);
      // 操作列单元格需要显示右边框，移除伪元素的右边框避免叠加
      border-right: 1px solid var(--cnai-table-border-color, var(--cnai-color-border-light, #f0f0f0));

      // 操作列单元格不需要右侧伪元素边框，使用实际边框
      &::after {
        display: none;
      }

      // hover 时背景色（长写属性只替换底色，保留跟单叠层）
      .ai-table-row:hover & {
        background-color: var(--cnai-table-hover-selected-bg, #f5f5f5) !important;
      }
    }
  }
}
