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

// ============================================================================
// 分组视图样式
// ============================================================================

// 表头容器样式
.table-header-container {
  margin-bottom: 16px;
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: #fff;

  .ai-table-scroll-wrapper {
    margin-bottom: 0;
  }
}

// 分组容器样式
.table-group-container {
  margin-bottom: 20px;
  position: relative;

  &:last-child {
    margin-bottom: 0;
  }

  .ai-table-scroll-wrapper {
    border-radius: 0 4px 4px 4px;
    margin-bottom: 0;
  }

  // 分组之间的分隔效果
  & + .table-group-container {
    margin-top: 8px;
  }

  // 分组表尾样式
  tfoot {
    .ai-table-footer-cell {
      &:first-child {
        border-right: 1px solid #f0f0f0;
      }
    }
  }
}

.table-group-content-container {
  overflow-y: auto;
  // hidden + 内层横向滚动 sticky 易在圆角处透缝；改 visible 由 .ai-table-container 承担裁剪
  overflow-x: visible;
  height: 100%;
  border-radius: 4px;

  // 确保表头圆角正确显示
  .ai-table-container {
    border-radius: 4px;
    overflow: auto; // 保持滚动功能
  }

  // 分组时间隔行、圆角缝隙等需透出外层背景；单元格/表头仍各自 #fff（见 _table / 分组头样式）
  .ai-table-table {
    background-color: transparent;
  }

  // 表头圆角：第一个和最后一个表头单元格
  thead {
    // 表头第一行：顶部圆角
    tr:first-child .ai-table-header-cell {
      &.ai-table-action-column-header {
        border-top-left-radius: 4px;
      }

      &.ai-table-operate-column-header,
      &:last-child:not(.ai-table-operate-column-header) {
        border-top-right-radius: 4px;
      }
    }

    // 表头最后一行：底部圆角
    tr:last-child .ai-table-header-cell {
      &.ai-table-action-column-header {
        border-bottom-left-radius: 4px;
      }

      &.ai-table-operate-column-header,
      &:last-child:not(.ai-table-operate-column-header) {
        border-bottom-right-radius: 4px;
      }
    }
  }
}

// 分组头折叠/展开过渡（子行由虚拟列表即时增删，无法做整段高度动画；箭头 + 圆角过渡可明显减轻生硬感）
$grouped-header-motion-duration: 0.22s;
$grouped-header-motion-ease: cubic-bezier(0.4, 0, 0.2, 1);

// 分组头部行样式
.grouped-header-row {
  background-color: #fff;

  &:hover {
    .ai-table-data-cell {
      background-color: #fff !important;
    }
  }

  // 所有分组头部行：左上角和右上角圆角，有上边框
  td {
    font-size: 12px;
    padding: 0 12px;
    background-color: #fff !important;
    transition:
      border-bottom-left-radius $grouped-header-motion-duration $grouped-header-motion-ease,
      border-bottom-right-radius $grouped-header-motion-duration $grouped-header-motion-ease;
    // 所有分组头部行都有边框（除了左边框）
    border: 1px solid #f0f0f0;
    border-left: none;

    // 第一个单元格：左上角圆角和左边框
    &:first-child {
      padding-left: 13px;
      border-top-left-radius: 4px;
      border-left: 1px solid #f0f0f0;

      // 第一列的内容要完全展示
      .ai-table-cell-content {
        max-width: none;
        overflow: visible;
        text-overflow: clip;
        white-space: nowrap;
        text-align: left;
        margin: 0;
        width: auto;
      }

      // 横向：左侧固定宽度放折叠箭头（对齐功能列），右侧为分组标题 + 条数
      .grouped-header-content {
        display: flex;
        flex-direction: row;
        align-items: center;
        width: 100%;
        min-width: 0;
        white-space: nowrap;
        box-sizing: border-box;
        overflow: visible;
        padding: 0 2px;

        .grouped-header-label {
          font-size: 12px;
          color: #8c8c8c;
          font-weight: 400;
          line-height: 1.4;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          max-width: 100%;
        }

        .grouped-header-content--expandable {
          cursor: pointer;
          user-select: none;
          outline: none;

          &:focus-visible {
            box-shadow: inset 0 0 0 2px rgba(24, 144, 255, 0.35);
            border-radius: 4px;
          }
        }

        .grouped-header-expand-slot {
          flex-shrink: 0;
          display: flex;
          align-items: center;
          justify-content: center;
          box-sizing: border-box;
        }

        .grouped-header-expand-icon {
          flex-shrink: 0;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          color: #8c8c8c;
          transform: rotate(0deg);
          transform-origin: center;
          transition: transform $grouped-header-motion-duration $grouped-header-motion-ease;

          &.grouped-header-expand-icon--collapsed {
            transform: rotate(-90deg);
          }
        }

        .grouped-header-value {
          display: flex;
          flex: 1;
          align-items: center;
          justify-content: space-between;
          min-width: 0;
          font-size: 12px;
          color: #262626;
          line-height: 1.4;
          gap: 12px;

          .grouped-header-value-text {
            flex: 1;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            min-width: 0;
            padding: 0 8px 0 0;
          }

          .grouped-header-value-count {
            flex-shrink: 0;
            color: #8c8c8c;
            font-weight: 400;
            white-space: nowrap;
            text-align: right;
            background-color: #f0f0f0;
            border-radius: 10px;
            padding: 2px 8px;
            font-size: 12px;
          }
        }
      }
    }

    // 最后一个单元格：右上角圆角
    &:last-child {
      border-top-right-radius: 4px;
    }

    // 第二个td（中间空白区域）和操作列单元格确保有右边框
    &:not(:first-child) {
      border-right: 1px solid #f0f0f0 !important;
    }
  }
}

// 分组头合并 sticky：盖住同行可滚动格，圆角处防透（与 _features 功能列策略一致）
.ai-table-table
  .grouped-header-row
  .grouped-header-sticky-cell.ai-table-data-cell.ai-table-sticky-column {
  isolation: isolate;
  z-index: 15;
  box-shadow:
    -4px 0 0 0 #fff,
    -1px 0 0 0 #f0f0f0;
}

// 折叠态：分组头单独成行，底边两角圆角（顶角由上文 td:first-child / td:last-child 已设）
.grouped-header-row--collapsed {
  td:first-child {
    border-bottom-left-radius: 4px;
  }

  td:last-child {
    border-bottom-right-radius: 4px;
  }
}

// 展开态：明确去掉底角，避免与首条数据行之间出现「双层圆角」缝
.grouped-header-row--expanded {
  td:first-child {
    border-bottom-left-radius: 0;
  }

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

@media (prefers-reduced-motion: reduce) {
  .grouped-header-row td {
    transition: none;
  }

  .grouped-header-expand-icon {
    transition: none !important;
  }
}

// 空白行样式（分组之间的分隔行）
.grouped-spacer-row {
  &:hover {
    background-color: transparent !important;

    .ai-table-data-cell {
      background-color: transparent !important;
    }
  }
}

// 分组行样式
.grouped-row {
  font-weight: 600;

  td {
    font-size: 14px;

    &:first-child {
      padding-left: 13px;
      border-right: 1px solid #f0f0f0;
    }
  }
}

// 分组中最后一行的圆角效果
.grouped-row-last {
  // 功能列单元格：左下角圆角
  .ai-table-action-column {
    border-bottom-left-radius: 4px;
  }

  // 操作列单元格：右下角圆角
  .ai-table-operate-column-cell {
    border-bottom-right-radius: 4px;
  }

  // 如果没有操作列，最后一个数据列单元格：右下角圆角
  td:last-child:not(.ai-table-operate-column-cell) {
    border-bottom-right-radius: 4px;
  }
}
