.pisell-settings-registry {
  display: flex;
  height: calc(100vh - 70px);
  background: #f5f5f5;
  overflow: hidden;

  // 左侧区块列表
  &-sidebar {
    width: 300px;
    background: #fff;
    border-right: 1px solid #e8e8e8;
    display: flex;
    flex-direction: column;

    &-header {
      padding: 24px 16px;
      border-bottom: 1px solid #e8e8e8;
    }

    &-title {
      margin: 0;
      font-size: 16px;
      font-weight: 600;
      color: #262626;
    }
  }

  // 区块列表
  &-sections {
    flex: 1;
    padding: 16px;
    overflow-y: auto;

    &-empty {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 200px;
    }
  }

  // 区块卡片
  &-section-card {
    margin-bottom: 12px;
    border: 1px solid #e8e8e8;
    transition: all 0.2s;
    cursor: pointer;

    &:hover {
      border-color: #1890ff;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

    &.active {
      border-color: #1890ff;
      background: #f0f8ff;

      .pisell-settings-registry-section-name {
        color: #1890ff;
      }
    }
  }

  &-section-content {
    display: flex;
    align-items: flex-start;
    gap: 12px;
  }

  &-section-icon {
    font-size: 20px;
    color: #666;
    margin-top: 2px;
  }

  &-section-info {
    flex: 1;
  }

  &-section-name {
    font-size: 14px;
    font-weight: 600;
    color: #262626;
    margin-bottom: 4px;
  }

  &-section-code {
    font-size: 12px;
    color: #8c8c8c;
    margin-bottom: 4px;
  }

  &-section-description {
    font-size: 12px;
    color: #666;
    line-height: 1.4;
  }

  &-section-stats {
    display: flex;
    gap: 12px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #f0f0f0;
    font-size: 12px;
    color: #8c8c8c;
  }

  // 右侧内容区域
  &-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: #fff;

    &-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 16px;
      border-bottom: 1px solid #e8e8e8;
    }

    &-title {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    &-main-title {
      margin: 0;
      font-size: 20px;
      font-weight: 600;
      color: #262626;
    }

    &-subtitle {
      font-size: 14px;
      color: #8c8c8c;
      margin-left: 8px;
    }
  }

  // 设置表格
  &-table {
    flex: 1;
    padding: 24px;
    background-color: #f9fafc;
    overflow-y: auto;

    &-empty {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 300px;
    }

    &-content {
      .ant-table-thead > tr > th {
        background: #fafafa;
        font-weight: 600;
      }

      .ant-table-tbody > tr {
        &:hover > td {
          background: #f5f5f5;
        }
      }
    }

    &-title {
      display: flex;
      align-items: center;
      gap: 8px;

      .ant-tag {
        margin: 0;
        font-size: 11px;
        padding: 2px 6px;
        border-radius: 4px;
      }
    }
  }

  // 代码和键的样式
  &-code,
  &-key {
    font-size: 12px;
    background: #f6f8fa;
    padding: 2px 6px;
    border-radius: 3px;
    color: #24292e;
  }

  // 响应式设计
  @media (max-width: 768px) {
    flex-direction: column;

    &-sidebar {
      width: 100%;
      height: 200px;
    }

    &-content {
      margin: 8px;
    }
  }
}

// 拖拽相关样式
.pisell-settings-registry-table-content {
  .ant-table-tbody > tr {
    &.ant-table-row-selected {
      background-color: #e6f7ff;
    }

    // 拖拽中的行样式
    &.dragging {
      opacity: 0.5;
      background-color: #f0f8ff;
      border: 2px dashed #1890ff;
    }

    // 拖拽悬停目标样式
    &.drag-over {
      background-color: #e6f7ff;
      border-top: 2px solid #1890ff;
    }
  }

  // 拖拽句柄样式
  .ant-table-cell:first-child {
    position: relative;
  }
}

// 拖拽覆盖层样式
.pisell-settings-registry-drag-overlay {
  background: #fff;
  border: 1px solid #d9d9d9;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  padding: 8px 12px;
  max-width: 300px;
  z-index: 9999;
}

.pisell-settings-registry-drag-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #262626;

  .ant-tag {
    margin: 0;
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 4px;
  }
}

// 拖拽时的样式
.sortable-ghost {
  opacity: 0.5;
}

.sortable-chosen {
  background-color: #f0f8ff;
}

// 拖拽句柄悬停效果
.pisell-settings-registry-table-content {
  .ant-table-tbody > tr:hover {
    .anticon-holder {
      color: #1890ff;
    }
  }
}

// 虚拟拖动容器样式
.virtual-drop-container {
  position: relative;
  transition: all 0.2s ease;

  &.group {
    // 组级别的拖动容器
    &.drop-active {
      background-color: rgba(24, 144, 255, 0.05);
      border-left: 3px solid #1890ff;
    }
  }

  &.item-container {
    // 项目容器的拖动区域
    min-height: 40px;
    border-radius: 4px;

    &.drop-active {
      background-color: rgba(24, 144, 255, 0.1);
      border: 2px dashed #1890ff;
      border-radius: 6px;
    }

    // 空容器的样式
    &:empty::before {
      content: '拖放设置项到此组';
      display: block;
      text-align: center;
      color: #bfbfbf;
      font-style: italic;
      padding: 12px;
      font-size: 12px;
    }
  }

  // 拖放指示器
  .drop-indicator {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    pointer-events: none;
    z-index: 10;

    .drop-line {
      width: 60px;
      height: 2px;
      background: #1890ff;
      border-radius: 1px;
      animation: pulse 1.5s ease-in-out infinite;
    }

    .drop-text {
      font-size: 12px;
      color: #1890ff;
      font-weight: 500;
      white-space: nowrap;
      background: rgba(255, 255, 255, 0.9);
      padding: 4px 8px;
      border-radius: 4px;
      border: 1px solid #1890ff;
    }
  }
}

// 拖拽动画
@keyframes pulse {
  0%,
  100% {
    opacity: 1;
    transform: scaleX(1);
  }
  50% {
    opacity: 0.6;
    transform: scaleX(1.2);
  }
}

// 拖拽时的表格行样式优化
.pisell-settings-registry-table-content {
  .ant-table-tbody > tr {
    // 组行的特殊样式
    &.group-row {
      background-color: #fafafa;
      font-weight: 500;

      &:hover {
        background-color: #f0f8ff;
      }

      &.dragging {
        background-color: rgba(24, 144, 255, 0.1);
        border: 2px solid #1890ff;
        border-radius: 4px;
      }
    }

    // 项目行的样式
    &:not(.group-row) {
      &.dragging {
        background-color: rgba(82, 196, 26, 0.1);
        border: 2px solid #52c41a;
        border-radius: 4px;
      }
    }
  }
}

// 空容器行的样式
.pisell-settings-registry-table-content {
  .ant-table-tbody > tr[data-row-key*='empty-container'] {
    background-color: #fafafa;

    &:hover {
      background-color: #f0f8ff;
    }

    td {
      border-bottom: 1px dashed #d9d9d9;
      color: #8c8c8c;
      font-style: italic;
    }
  }
}