/* 经验复盘样式 */
.experience-content {
  .experience-intro {
    background: linear-gradient(135deg, #e3f2fd 0%, #f3e5f5 100%);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 32px;
    
    .intro-text {
      font-size: 15px;
      color: #555;
      text-align: center;
      margin: 0;
      line-height: 1.6;
    }
  }
  
  .experience-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-bottom: 40px;
    
    .experience-card {
      background: white;
      border: 1px solid #e0e0e0;
      border-radius: 16px;
      padding: 0;
      overflow: hidden;
      transition: all 0.3s ease;
      
      &:hover {
        transform: translateY(-4px);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
      }
      
      &.needs-card {
        border-top: 4px solid #007aff;
      }
      
      &.concerns-card {
        border-top: 4px solid #ff9500;
      }
      
      &.complaints-card {
        border-top: 4px solid #ff3b30;
      }
      
      &.highlights-card {
        border-top: 4px solid #34c759;
      }
      
      .card-header-custom {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 20px 24px;
        background: linear-gradient(to bottom, #fafafa, #ffffff);
        border-bottom: 1px solid #f0f0f0;
        
        .card-icon {
          font-size: 22px;
        }
        
        .card-title-custom {
          flex: 1;
          font-size: 16px;
          font-weight: 700;
          color: #1a1a1a;
          margin: 0;
        }
        
        .count-badge {
          padding: 4px 12px;
          border-radius: 20px;
          font-size: 12px;
          font-weight: 600;
          background: #f0f0f0;
          color: #666;
          
          &.warning {
            background: #fff3cd;
            color: #ff9500;
          }
          
          &.success {
            background: #e7f4e4;
            color: #34c759;
          }
        }
      }
      
      .card-content-scrollable {
        max-height: 300px;
        overflow-y: auto;
        padding: 20px 24px;
        
        &::-webkit-scrollbar {
          width: 6px;
        }
        
        &::-webkit-scrollbar-track {
          background: #f5f5f5;
        }
        
        &::-webkit-scrollbar-thumb {
          background: #c0c0c0;
          border-radius: 3px;
        }
        
        .experience-list {
          list-style: none;
          padding: 0;
          margin: 0;
          
          .experience-item {
            display: flex;
            gap: 12px;
            margin-bottom: 16px;
            padding-bottom: 16px;
            border-bottom: 1px solid #f0f0f0;
            
            &:last-child {
              border-bottom: none;
              margin-bottom: 0;
              padding-bottom: 0;
            }
            
            .item-bullet {
              font-size: 16px;
              flex-shrink: 0;
              line-height: 1.5;
            }
            
            .item-content {
              flex: 1;
              
              .item-text {
                font-size: 14px;
                color: #333;
                line-height: 1.6;
                margin: 0 0 8px 0;
              }
              
              .item-meta {
                display: flex;
                flex-wrap: wrap;
                gap: 12px;
                font-size: 12px;
                
                .meta-time,
                .meta-source {
                  color: #999;
                }
                
                .meta-resolved {
                  color: #34c759;
                  font-weight: 600;
                }
                
                .meta-unresolved {
                  color: #ff9500;
                  font-weight: 600;
                }
                
                .meta-severity {
                  padding: 2px 8px;
                  border-radius: 4px;
                  font-weight: 600;
                  
                  &.high {
                    background: #ffe5e5;
                    color: #ff3b30;
                  }
                  
                  &.medium {
                    background: #fff3cd;
                    color: #ff9500;
                  }
                  
                  &.low {
                    background: #f0f0f0;
                    color: #666;
                  }
                }
                
                .meta-category {
                  color: #007aff;
                  font-weight: 600;
                }
                
                .meta-praised {
                  color: #34c759;
                  font-weight: 600;
                }
              }
              
              .item-resolution {
                margin-top: 8px;
                padding: 10px;
                background: #e7f4e4;
                border-radius: 8px;
                font-size: 13px;
                
                .resolution-label {
                  font-weight: 600;
                  color: #34c759;
                  margin-right: 6px;
                }
                
                .resolution-text {
                  color: #555;
                }
              }
            }
          }
        }
        
        .empty-state-small {
          text-align: center;
          padding: 40px 20px;
          color: #999;
          font-size: 14px;
        }
      }
    }
  }
  
  .communication-summary {
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 16px;
    padding: 24px;
    
    .communication-timeline {
      display: flex;
      flex-direction: column;
      gap: 20px;
      
      .communication-item {
        display: flex;
        gap: 16px;
        padding: 16px;
        background: #fafafa;
        border-radius: 12px;
        border-left: 4px solid #007aff;
        transition: all 0.3s ease;
        
        &:hover {
          background: #f0f0f0;
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
        }
        
        .comm-time {
          font-size: 12px;
          color: #999;
          white-space: nowrap;
          min-width: 120px;
        }
        
        .comm-content {
          flex: 1;
          
          .comm-header {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 8px;
            
            .comm-participant {
              font-weight: 700;
              color: #1a1a1a;
            }
            
            .comm-type {
              padding: 3px 10px;
              border-radius: 12px;
              font-size: 11px;
              font-weight: 600;
              
              &.requirement {
                background: #e3f2fd;
                color: #007aff;
              }
              
              &.response {
                background: #e7f4e4;
                color: #34c759;
              }
              
              &.concern {
                background: #fff3cd;
                color: #ff9500;
              }
            }
          }
          
          .comm-message {
            font-size: 14px;
            color: #555;
            line-height: 1.6;
            margin: 0 0 8px 0;
          }
          
          .comm-attachments {
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 12px;
            color: #999;
            
            .attachment-icon {
              font-size: 14px;
            }
          }
        }
      }
    }
  }
}

/* 优化建议样式 */
.suggestions-content {
  .suggestions-intro {
    .intro-card {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      color: white;
      border-radius: 16px;
      padding: 28px;
      margin-bottom: 32px;
      text-align: center;
      
      .intro-title {
        font-size: 22px;
        font-weight: 700;
        margin: 0 0 10px 0;
      }
      
      .intro-desc {
        font-size: 15px;
        opacity: 0.95;
        margin: 0;
        line-height: 1.6;
      }
    }
  }
  
  .suggestions-list {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-bottom: 40px;
    
    .suggestion-card {
      background: white;
      border: 1px solid #e0e0e0;
      border-radius: 16px;
      padding: 0;
      overflow: hidden;
      transition: all 0.3s ease;
      
      &:hover {
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
        transform: translateY(-2px);
      }
      
      &.high {
        border-left: 6px solid #ff3b30;
      }
      
      &.medium {
        border-left: 6px solid #ff9500;
      }
      
      &.low {
        border-left: 6px solid #34c759;
      }
      
      .suggestion-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20px 24px;
        background: linear-gradient(to bottom, #fafafa, #ffffff);
        border-bottom: 1px solid #f0f0f0;
        
        .header-left-content {
          display: flex;
          align-items: center;
          gap: 12px;
          
          .suggestion-priority-badge {
            padding: 6px 14px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: 700;
            
            &.high {
              background: #ffe5e5;
              color: #ff3b30;
            }
            
            &.medium {
              background: #fff3cd;
              color: #ff9500;
            }
            
            &.low {
              background: #e7f4e4;
              color: #34c759;
            }
          }
          
          .suggestion-category {
            font-size: 14px;
            font-weight: 600;
            color: #666;
          }
        }
        
        .header-right-content {
          .suggestion-impact {
            font-size: 13px;
            color: #666;
            
            strong {
              color: #007aff;
              font-weight: 700;
            }
          }
        }
      }
      
      .suggestion-body {
        padding: 24px;
        
        .suggestion-problem,
        .suggestion-solution,
        .suggestion-actions-plan {
          margin-bottom: 24px;
          
          &:last-child {
            margin-bottom: 0;
          }
          
          .problem-title,
          .solution-title,
          .actions-title {
            font-size: 15px;
            font-weight: 700;
            color: #1a1a1a;
            margin: 0 0 12px 0;
          }
          
          .problem-text,
          .solution-text {
            font-size: 14px;
            color: #555;
            line-height: 1.7;
            margin: 0 0 16px 0;
          }
        }
        
        .problem-data {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
          gap: 12px;
          
          .data-point {
            background: #fafafa;
            border: 1px solid #e0e0e0;
            border-radius: 10px;
            padding: 12px;
            
            .data-label {
              font-size: 12px;
              color: #999;
              margin-right: 4px;
            }
            
            .data-value {
              font-size: 15px;
              font-weight: 700;
              color: #1a1a1a;
              
              &.warning {
                color: #ff9500;
              }
            }
          }
        }
        
        .actions-list {
          list-style: none;
          padding: 0;
          margin: 0;
          
          .action-item {
            display: flex;
            gap: 12px;
            margin-bottom: 12px;
            padding: 12px;
            background: #f8f9fa;
            border-radius: 10px;
            border-left: 3px solid #007aff;
            
            &:last-child {
              margin-bottom: 0;
            }
            
            .action-step {
              font-weight: 700;
              color: #007aff;
              flex-shrink: 0;
            }
            
            .action-text {
              font-size: 14px;
              color: #555;
              line-height: 1.6;
            }
          }
        }
        
        .suggestion-references {
          margin-top: 16px;
          padding-top: 16px;
          border-top: 1px solid #f0f0f0;
          
          .references-label {
            font-size: 13px;
            color: #666;
            margin-right: 8px;
          }
          
          .reference-tag {
            display: inline-block;
            padding: 4px 10px;
            background: #e3f2fd;
            color: #007aff;
            border-radius: 12px;
            font-size: 12px;
            font-weight: 600;
            margin-right: 8px;
            margin-top: 6px;
          }
        }
      }
      
      .suggestion-footer {
        display: flex;
        gap: 12px;
        padding: 16px 24px;
        background: #fafafa;
        border-top: 1px solid #f0f0f0;
        
        .action-btn {
          padding: 10px 20px;
          border: none;
          border-radius: 10px;
          font-size: 14px;
          font-weight: 600;
          cursor: pointer;
          transition: all 0.3s ease;
          
          &.accept {
            background: linear-gradient(135deg, #34c759 0%, #28a745 100%);
            color: white;
            
            &:hover {
              transform: translateY(-2px);
              box-shadow: 0 4px 12px rgba(52, 199, 89, 0.4);
            }
          }
          
          &.detail {
            background: #f0f0f0;
            color: #333;
            
            &:hover {
              background: #e0e0e0;
            }
          }
        }
      }
    }
  }
  
  .empty-state-large {
    text-align: center;
    padding: 80px 20px;
    
    .empty-icon {
      font-size: 64px;
      margin-bottom: 20px;
    }
    
    .empty-title {
      font-size: 20px;
      font-weight: 700;
      color: #1a1a1a;
      margin: 0 0 12px 0;
    }
    
    .empty-desc {
      font-size: 15px;
      color: #999;
      margin: 0;
    }
  }
  
  .suggestions-stats {
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 16px;
    padding: 24px;
    
    .stats-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 20px;
      
      .stat-card {
        display: flex;
        align-items: center;
        gap: 16px;
        padding: 20px;
        background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
        border: 1px solid #e0e0e0;
        border-radius: 12px;
        transition: all 0.3s ease;
        
        &:hover {
          transform: translateY(-2px);
          box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
        }
        
        .stat-icon {
          font-size: 32px;
        }
        
        .stat-content {
          .stat-value {
            font-size: 28px;
            font-weight: 700;
            color: #1a1a1a;
            margin: 0 0 4px 0;
          }
          
          .stat-label {
            font-size: 13px;
            color: #999;
            margin: 0;
          }
        }
      }
    }
  }
}

