.workflow-demo-page {
  min-height: 100vh;
}

.container {
  padding: 0 24px;
  max-width: none !important; // 覆盖全局的最大宽度限制
  width: 100% !important;
}

// 页面头部
.page-header {
  border-bottom: 1px solid #e8e8e8;

  .header-content {
    padding: 24px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .title-section {
      h1 {
        margin: 0 0 8px 0;
        font-size: 28px;
        font-weight: 600;
        color: #1a1a1a;
      }

      p {
        margin: 0;
        color: #666;
        font-size: 16px;
      }
    }

    .header-actions {
      display: flex;
      gap: 12px;
    }
  }
}

// 场景选择
.scenario-section {
  border-bottom: 1px solid #e8e8e8;

  .container {
    padding: 16px 24px 0;
  }
  .scenario-tab {
    gap: 8px;
    font-size: 14px;
  }
}

// 主要内容
.main-content {
  padding: 24px 0;

  .content-layout {
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: 24px;
    min-height: calc(100vh - 200px);
  }
}

// 工作流设计器
.workflow-designer {
  border-radius: 8px;
  border: 1px solid #e8e8e8;
  overflow: hidden;

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

    .designer-title {
      display: flex;
      align-items: center;
      gap: 12px;

      .title-icon {
        font-size: 20px;
        color: #1890ff;
      }

      h3 {
        margin: 0 0 4px 0;
        font-size: 16px;
        font-weight: 600;
      }

      p {
        margin: 0;
        font-size: 13px;
      }
    }

    .designer-actions {
      display: flex;
      gap: 8px;
    }
  }
  .workflow-container {
    position: relative;
    width: 100%;
  }
}

// 侧边栏
.sidebar {
  display: flex;
  flex-direction: column;
  gap: 16px;

  .sidebar-section {
    border-radius: 8px;
    border: 1px solid #e8e8e8;
    overflow: hidden;

    &.stats-section {
      padding: 16px;
    }

    &.preview-section {
      padding: 0;
    }

    &.data-section {
      flex: 1;
      min-height: 300px;
      padding: 16px;
    }

    .section-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      padding: 16px 16px 0 16px;
      margin-bottom: 16px;

      &:first-child {
        margin-bottom: 16px;
      }

      div[class*='i-mdi'] {
        font-size: 16px;
        color: #1890ff;
      }

      h4 {
        margin: 0;
        font-size: 14px;
        font-weight: 600;
        flex: 1;
      }

      .preview-controls {
        display: flex;
        align-items: center;
      }
    }
  }
}

// 统计网格 - 优化版
.stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;

  .stat-item {
    text-align: center;
    padding: 12px 8px;
    border-radius: 6px;
    border: 1px solid #f0f0f0;
    transition: all 0.2s ease;

    &:hover {
      border-color: #d9eaff;
    }

    .stat-value {
      font-size: 20px;
      font-weight: 700;
      color: #1890ff;
      margin-bottom: 2px;
    }

    .stat-label {
      font-size: 11px;
    }
  }
}

// 流程预览 - 优化紧凑布局
.preview-content {
  padding: 0 16px 16px 16px;
  max-height: 280px; // 减少高度
  transition: max-height 0.3s ease;

  &.expanded {
    max-height: 450px; // 减少展开高度
  }

  .flow-timeline {
    .flow-compact {
      .flow-steps {
        display: flex;
        align-items: center;
        gap: 4px;
        padding: 8px 10px; // 减少内边距
        border-radius: 6px;
        border: 1px solid #f0f0f0;
        overflow-x: auto;

        .step-compact {
          position: relative;
          display: flex;
          align-items: center;
          gap: 4px;
          cursor: pointer;
          transition: all 0.2s ease;

          .step-icon {
            width: 24px; // 减少尺寸
            height: 24px; // 减少尺寸
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px; // 减小图标
            color: white;
            flex-shrink: 0;
            border: 2px solid transparent;
            transition: all 0.2s ease;
          }
          .step-arrow {
            font-size: 12px;
            margin: 0 2px;
          }

          &:hover .step-icon {
            transform: scale(1.1);
            border-color: white;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
          }

          &.node-start .step-icon {
            background: linear-gradient(135deg, #722ed1, #9254de);
          }

          &.node-approval .step-icon {
            background: linear-gradient(135deg, #1890ff, #40a9ff);
          }

          &.node-copy .step-icon {
            background: linear-gradient(135deg, #52c41a, #73d13d);
          }

          &.node-condition .step-icon {
            background: linear-gradient(135deg, #fa8c16, #ffa940);
          }
        }
      }

      .selected-node-info {
        margin-top: 8px; // 减少间距
        padding: 10px; // 减少内边距
        border-radius: 6px;
        border: 1px solid #e8e8e8;

        .node-title {
          font-weight: 600;
          color: #1a1a1a;
          margin-bottom: 6px; // 减少间距
          font-size: 13px; // 减小字体
        }

        .node-details {
          .detail-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 5px;
            font-size: 11px;
            min-height: 20px;

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

            .detail-label {
              color: #666;
              font-weight: 500;
              flex: 1;
            }

            .user-list {
              display: flex;
              align-items: center;
              gap: 4px;

              .more-count {
                font-size: 9px;
                padding: 1px 4px;
                border-radius: 8px;
              }
            }

            .condition-count {
              color: #fa8c16;
              font-weight: 500;
            }
          }
        }
      }
    }

    .flow-expanded {
      max-height: 350px; // 减少高度
      overflow-y: auto;

      .step-expanded {
        position: relative;
        margin-bottom: 6px; // 减少间距
        .step-connector {
          position: absolute;
          top: -3px;
          left: 50%;
          transform: translateX(-50%);
          width: 2px;
          height: 6px;
          background: linear-gradient(to bottom, #1890ff, transparent);
        }

        .step-node {
          border-radius: 6px; // 减少圆角
          padding: 8px; // 减少内边距
          border: 1px solid #e8e8e8;
          transition: all 0.2s ease;

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

          &.node-start {
            border-color: #722ed1;
            background: #f9f0ff;
          }

          &.node-approval {
            border-color: #1890ff;
            background: #e6f7ff;
          }

          &.node-copy {
            border-color: #52c41a;
            background: #f6ffed;
          }

          &.node-condition {
            border-color: #fa8c16;
            background: #fff7e6;
          }

          .node-header {
            display: flex;
            align-items: center;
            gap: 8px; // 减少间距
            margin-bottom: 6px; // 减少间距
            .node-icon {
              font-size: 14px; // 减小图标
              color: #1890ff;
            }

            .node-title {
              font-weight: 600;
              color: #1a1a1a;
              font-size: 12px; // 减小字体
            }
          }

          .node-content {
            .content-item {
              display: flex;
              align-items: center;
              justify-content: space-between;
              margin-bottom: 4px;
              min-height: 22px;

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

              .content-label {
                font-size: 11px;
                font-weight: 500;
                flex: 1;
              }

              .content-label {
                font-size: 11px;
                font-weight: 500;
                align-self: flex-start;
                padding-top: 2px;
              }

              .user-avatars {
                display: flex;
                align-items: center;
                gap: 3px;

                .more-users {
                  font-size: 9px;
                  background: #f0f0f0;
                  padding: 1px 4px;
                  border-radius: 8px;
                  margin-left: 4px;
                }
              }

              .condition-text {
                font-size: 11px;
                color: #fa8c16;
                font-weight: 500;
              }
            }
          }
        }
      }
    }
  }
}

// 配置详情 - 紧凑版
.config-details {
  .config-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0; // 减少内边距
    border-bottom: 1px solid #f0f0f0;
    font-size: 11px; // 减小字体
    min-height: 24px; // 减少高度
    &:last-child {
      border-bottom: none;
    }

    .value {
      color: #1a1a1a;
      font-weight: 500;
    }
  }
}

// 验证结果 - 紧凑版
.validation-results {
  .validation-success {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 16px; // 减少内边距
    color: #52c41a;
    font-weight: 500;
    font-size: 12px; // 减小字体

    div[class*='i-mdi'] {
      font-size: 16px; // 减小图标
    }
  }

  .validation-errors {
    .error-item {
      display: flex;
      align-items: flex-start;
      gap: 6px;
      padding: 8px; // 减少内边距
      border-radius: 4px; // 减小圆角
      margin-bottom: 6px; // 减少间距
      border-left: 3px solid #ff4d4f;

      div[class*='i-mdi'] {
        flex-shrink: 0;
        margin-top: 1px;
        color: #ff4d4f;
        font-size: 12px; // 减小图标
      }

      .error-content {
        .error-message {
          font-weight: 500;
          margin-bottom: 2px; // 减少间距
          font-size: 11px; // 减小字体
        }

        .error-node {
          font-size: 10px; // 减小字体
          color: #666;
        }
      }
    }
  }
}

// 响应式设计
@media (max-width: 1200px) {
  .content-layout {
    grid-template-columns: 1fr;
    grid-template-rows: 600px auto;
  }

  .sidebar {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    display: grid;
  }
}

@media (max-width: 768px) {
  .page-header .header-content {
    flex-direction: column;
    gap: 16px;
    text-align: center;
  }

  .container {
    padding: 0 16px;
  }

  .sidebar {
    grid-template-columns: 1fr;
  }

  .flow-steps {
    flex-wrap: wrap;
  }
}

