/* ========== 新增：预警面板样式 ========== */
.alert-panel {
  background: linear-gradient(135deg, #fff5f5, #ffffff);
  border: 1px solid #fecaca;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 24px;
  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.1);
  
  h3 {
    font-size: 18px;
    font-weight: 700;
    color: #dc2626;
    margin: 0 0 16px 0;
  }
  
  .alert-section {
    margin-top: 16px;
    
    h4 {
      font-size: 16px;
      font-weight: 600;
      margin: 12px 0;
      color: #1f2937;
    }
    
    .alert-list {
      display: flex;
      flex-direction: column;
      gap: 8px;
      
      .alert-item {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 12px 16px;
        background: white;
        border-radius: 8px;
        border: 1px solid #e5e7eb;
        cursor: pointer;
        transition: all 0.2s ease;
        
        &:hover {
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
          transform: translateX(4px);
        }
        
        .name {
          flex: 1;
          font-weight: 500;
          color: #1f2937;
        }
        
        .badge {
          padding: 2px 8px;
          border-radius: 4px;
          font-size: 12px;
          font-weight: 500;
          
          &.danger { background: #fee2e2; color: #dc2626; }
          &.warning { background: #fef3c7; color: #d97706; }
          &.info { background: #dbeafe; color: #2563eb; }
        }
        
        .urgency {
          padding: 2px 6px;
          border-radius: 4px;
          font-size: 12px;
          
          &.u-high { background: #fecaca; color: #dc2626; }
          &.u-medium { background: #fed7aa; color: #ea580c; }
          &.u-low { background: #d1fae5; color: #059669; }
        }
        
        .info {
          font-size: 14px;
          color: #6b7280;
        }
        
        .deadline {
          font-size: 14px;
          color: #6b7280;
        }
      }
    }
  }
}

/* ========== 工作量卡片样式 ========== */
.workload-summary.cards {
  margin-bottom: 24px;
  
  h3 {
    font-size: 18px;
    font-weight: 700;
    color: #1f2937;
    margin: 0 0 16px 0;
  }
  
  .workload-cards-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
    
    .workload-card {
      background: white;
      border-radius: 12px;
      padding: 16px;
      border: 2px solid #e5e7eb;
      cursor: pointer;
      transition: all 0.2s ease;
      
      &:hover {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
        transform: translateY(-2px);
      }
      
      &.overload {
        border-color: #ef4444;
        background: linear-gradient(135deg, #fef2f2, #ffffff);
      }
      
      &.busy {
        border-color: #f59e0b;
        background: linear-gradient(135deg, #fffbeb, #ffffff);
      }
      
      &.idle {
        border-color: #10b981;
        background: linear-gradient(135deg, #f0fdf4, #ffffff);
      }
      
      .designer-name {
        font-size: 16px;
        font-weight: 600;
        color: #1f2937;
        margin-bottom: 12px;
      }
      
      .load-bar {
        position: relative;
        height: 24px;
        background: #f3f4f6;
        border-radius: 12px;
        overflow: hidden;
        margin-bottom: 12px;
        
        .load-fill {
          height: 100%;
          background: linear-gradient(90deg, #3b82f6, #6366f1);
          transition: width 0.3s ease;
        }
        
        .load-text {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          font-size: 14px;
          font-weight: 600;
          color: #1f2937;
        }
      }
      
      &.overload .load-bar .load-fill {
        background: linear-gradient(90deg, #ef4444, #dc2626);
      }
      
      &.busy .load-bar .load-fill {
        background: linear-gradient(90deg, #f59e0b, #d97706);
      }
      
      &.idle .load-bar .load-fill {
        background: linear-gradient(90deg, #10b981, #059669);
      }
      
      .details {
        display: flex;
        gap: 12px;
        font-size: 14px;
        color: #6b7280;
        
        span {
          flex: 1;
        }
        
        .overdue {
          color: #dc2626;
          font-weight: 600;
        }
      }
    }
    
    .empty-state {
      grid-column: 1 / -1;
      text-align: center;
      padding: 48px;
      color: #6b7280;
    }
  }
}

/* ========== 智能推荐弹窗样式 ========== */
.smart-match-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  
  .modal-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    animation: fadeIn 0.2s ease;
  }
  
  .modal-content {
    position: relative;
    width: 90%;
    max-width: 800px;
    max-height: 90vh;
    background: white;
    border-radius: 16px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: slideUp 0.3s ease;
    
    .modal-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 20px;
      border-bottom: 1px solid #e5e7eb;
      background: linear-gradient(135deg, #f0f9ff, #ffffff);
      
      h3 {
        font-size: 20px;
        font-weight: 700;
        color: #1f2937;
        margin: 0;
      }
      
      .btn-close {
        width: 36px;
        height: 36px;
        border: none;
        background: #f3f4f6;
        border-radius: 50%;
        font-size: 24px;
        color: #6b7280;
        cursor: pointer;
        transition: all 0.2s ease;
        
        &:hover {
          background: #e5e7eb;
          color: #1f2937;
        }
      }
    }
    
    .project-info {
      padding: 16px 20px;
      background: #f9fafb;
      border-bottom: 1px solid #e5e7eb;
      
      h4 {
        font-size: 18px;
        font-weight: 600;
        color: #1f2937;
        margin: 0 0 8px 0;
      }
      
      .tags {
        display: flex;
        gap: 8px;
        
        .tag {
          padding: 4px 12px;
          border-radius: 8px;
          font-size: 14px;
          background: white;
          border: 1px solid #e5e7eb;
          
          &.urgency {
            &.u-high { background: #fecaca; color: #dc2626; border-color: #dc2626; }
            &.u-medium { background: #fed7aa; color: #ea580c; border-color: #ea580c; }
            &.u-low { background: #d1fae5; color: #059669; border-color: #059669; }
          }
        }
      }
    }
    
    .recommendations-list {
      flex: 1;
      overflow-y: auto;
      padding: 20px;
      
      .rec-card {
        display: flex;
        gap: 16px;
        padding: 16px;
        background: white;
        border: 1px solid #e5e7eb;
        border-radius: 12px;
        margin-bottom: 16px;
        transition: all 0.2s ease;
        
        &:hover {
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
        }
        
        .rank {
          width: 40px;
          height: 40px;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 18px;
          font-weight: 700;
          border-radius: 50%;
          background: #f3f4f6;
          color: #6b7280;
          flex-shrink: 0;
          
          &.gold { background: linear-gradient(135deg, #fbbf24, #f59e0b); color: white; }
          &.silver { background: linear-gradient(135deg, #d1d5db, #9ca3af); color: white; }
          &.bronze { background: linear-gradient(135deg, #f97316, #ea580c); color: white; }
        }
        
        .designer-info {
          flex: 1;
          
          h4 {
            font-size: 16px;
            font-weight: 600;
            color: #1f2937;
            margin: 0 0 8px 0;
          }
          
          .match-score-bar {
            position: relative;
            height: 20px;
            background: #f3f4f6;
            border-radius: 12px;
            overflow: hidden;
            
            .score-fill {
              height: 100%;
              background: linear-gradient(90deg, #3b82f6, #6366f1);
              display: flex;
              align-items: center;
              justify-content: flex-end;
              padding-right: 8px;
              transition: width 0.3s ease;
              
              span {
                font-size: 12px;
                font-weight: 600;
                color: white;
              }
            }
          }
        }
        
        .details {
          flex: 1;
          font-size: 14px;
          
          p {
            margin: 4px 0;
            color: #6b7280;
            
            strong {
              color: #1f2937;
            }
            
            &.reason {
              color: #2563eb;
              font-weight: 500;
            }
          }
        }
        
        .btn-assign {
          align-self: center;
          padding: 8px 20px;
          background: linear-gradient(135deg, #3b82f6, #6366f1);
          color: white;
          border: none;
          border-radius: 8px;
          font-size: 14px;
          font-weight: 600;
          cursor: pointer;
          transition: all 0.2s ease;
          
          &:hover {
            box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
            transform: translateY(-2px);
          }
        }
      }
      
      .empty {
        text-align: center;
        padding: 48px;
        color: #6b7280;
        
        p {
          margin: 8px 0;
          
          &:first-child {
            font-size: 18px;
            font-weight: 600;
            color: #1f2937;
          }
        }
      }
    }
  }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ========== 项目卡片智能推荐按钮 ========== */
.project-card-footer {
  .btn-smart {
    background: linear-gradient(135deg, #8b5cf6, #6366f1);
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    
    &:hover {
      box-shadow: 0 4px 12px rgba(139, 92, 246, 0.4);
      transform: translateY(-2px);
    }
  }
}

/* ========== 工作负载甘特图样式 ========== */
.workload-gantt-card {
  background: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  margin-bottom: 24px;
  
  .gantt-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    flex-wrap: wrap;
    gap: 12px;
    
    h3 {
      font-size: 18px;
      font-weight: 700;
      color: #1f2937;
      margin: 0;
    }
    
    .gantt-subtitle {
      width: 100%;
      font-size: 13px;
      color: #6b7280;
      margin: 4px 0 8px 0;
    }
    
    .gantt-controls {
      display: flex;
      align-items: center;
      gap: 20px;
      
      .scale-switch {
        display: flex;
        background: #f3f4f6;
        border-radius: 8px;
        padding: 2px;
        
        button {
          padding: 8px 16px;
          border: none;
          background: transparent;
          border-radius: 6px;
          font-size: 14px;
          font-weight: 500;
          color: #6b7280;
          cursor: pointer;
          transition: all 0.2s ease;
          
          &:hover {
            color: #1f2937;
          }
          
          &.active {
            background: white;
            color: #3b82f6;
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
          }
        }
      }
      
      .legend {
        display: flex;
        gap: 16px;
        align-items: center;
        
        .legend-item {
          display: flex;
          align-items: center;
          gap: 6px;
          font-size: 14px;
          color: #6b7280;
          
          .dot {
            width: 20px;
            height: 16px;
            border-radius: 4px;
            border: 1px solid rgba(0, 0, 0, 0.1);
            
            &.idle {
              background: #d1fae5; // 空闲-浅绿色（0个项目）
            }
            
            &.busy {
              background: #bfdbfe; // 忙碌-浅蓝色（1-2个项目）
            }
            
            &.overload {
              background: #fecaca; // 超负荷-浅红色（≥3个项目）
            }
            
            &.leave {
              background: #e5e7eb; // 请假-灰色
            }
          }
        }
      }
    }
  }
  
  .gantt-container {
    width: 100%;
    height: 500px;
    min-height: 400px;
    cursor: pointer; // 提示可点击
    
    // ECharts会覆盖cursor，所以在全局添加
    canvas {
      cursor: pointer !important;
    }
  }
}

