.designer-profile-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: #f5f7fa;
  animation: fadeIn 0.3s ease-in-out;
  
  .profile-header {
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
    padding: 24px;
    margin-bottom: 20px;
    border-radius: 8px;
    
    .header-content {
      display: flex;
      align-items: center;
      
      .avatar-section {
        margin-right: 24px;
        
        .avatar {
          width: 100px;
          height: 100px;
          border-radius: 50%;
          object-fit: cover;
          border: 3px solid #fff;
          box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }
      }
      
      .info-section {
        flex: 1;
        
        h1 {
          margin: 0 0 12px 0;
          font-size: 24px;
          font-weight: 500;
          display: flex;
          align-items: center;
          
          .position-badge {
            margin-left: 12px;
            font-size: 14px;
            background-color: #1a3a6d;
            color: white;
            padding: 4px 10px;
            border-radius: 4px;
            font-weight: normal;
          }
        }
        
        .basic-info {
          display: flex;
          gap: 24px;
          
          .info-item {
            display: flex;
            align-items: center;
            color: #5a6a85;
            
            mat-icon {
              margin-right: 6px;
              font-size: 18px;
              height: 18px;
              width: 18px;
              line-height: 18px;
            }
          }
        }
      }
      
      .action-section {
        margin-left: auto;
      }
    }
  }
  
  .profile-tabs {
    flex: 1;
    
    ::ng-deep .mat-mdc-tab-header {
      background-color: white;
      border-radius: 8px 8px 0 0;
      padding: 0 16px;
    }
    
    ::ng-deep .mat-mdc-tab-body-wrapper {
      flex: 1;
      background-color: white;
      border-radius: 0 0 8px 8px;
    }
  }
  
  .tab-content {
    padding: 24px;
    height: 100%;
    overflow-y: auto;
    animation: slideInUp 0.3s ease-out;
  }
  
  // 基础信息标签页样式
  .info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 20px;
    
    .info-card {
      border-radius: 8px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
      
      mat-card-header {
        padding: 16px;
        border-bottom: 1px solid #eee;
        
        mat-card-title {
          margin: 0;
          font-size: 18px;
          font-weight: 500;
          color: #1a3a6d;
        }
      }
      
      mat-card-content {
        padding: 16px;
      }
      
      mat-card-actions {
        padding: 8px 16px 16px;
        display: flex;
        justify-content: flex-end;
      }
    }
    
    .section-title {
      font-weight: 500;
      margin-bottom: 12px;
      color: #5a6a85;
    }
    
    .skill-chips, .style-chips, .date-chips {
      margin-bottom: 20px;
      
      mat-chip-set {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
      }
    }
    
    .certificate-list {
      .certificate-item {
        display: flex;
        align-items: center;
        padding: 12px 0;
        border-bottom: 1px solid #eee;
        
        &:last-child {
          border-bottom: none;
        }
        
        .cert-icon {
          margin-right: 16px;
          
          mat-icon {
            color: #4caf50;
            background-color: rgba(76, 175, 80, 0.1);
            border-radius: 50%;
            padding: 6px;
          }
        }
        
        .cert-details {
          flex: 1;
          
          .cert-name {
            font-weight: 500;
            margin-bottom: 4px;
          }
          
          .cert-meta {
            display: flex;
            color: #5a6a85;
            font-size: 13px;
            
            .cert-type {
              margin-right: 12px;
              padding: 2px 8px;
              background-color: #e3f2fd;
              border-radius: 4px;
            }
          }
        }
      }
      
      .add-certificate {
        display: flex;
        justify-content: center;
        padding: 20px 0;
      }
    }
    
    .availability-info {
      .availability-status {
        display: flex;
        align-items: center;
        margin-bottom: 16px;
        color: #f44336;
        
        &.available {
          color: #4caf50;
        }
        
        mat-icon {
          margin-right: 8px;
        }
      }
    }
    
    .permission-list {
      .permission-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12px 0;
        border-bottom: 1px solid #eee;
        
        &:last-child {
          border-bottom: none;
        }
        
        .permission-name {
          font-weight: 500;
        }
        
        .permission-status {
          padding: 4px 10px;
          border-radius: 4px;
          font-size: 13px;
          
          &.granted {
            background-color: #e8f5e9;
            color: #2e7d32;
          }
          
          &.denied {
            background-color: #ffebee;
            color: #c62828;
          }
        }
      }
    }
  }
  
  // 工作记录标签页样式
  .project-filters {
    margin-bottom: 20px;
  }
  
  .project-table {
    width: 100%;
    margin-bottom: 30px;
    box-shadow: none;
    border: 1px solid #eee;
    border-radius: 8px;
    overflow: hidden;
    
    .mat-mdc-header-row {
      background-color: #f5f7fa;
    }
    
    .mat-mdc-row {
      &:hover {
        background-color: #f5f7fa;
      }
    }
    
    .project-name {
      font-weight: 500;
      margin-bottom: 4px;
    }
    
    .project-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 4px;
      
      .tag {
        font-size: 12px;
        padding: 2px 8px;
        background-color: #e3f2fd;
        border-radius: 4px;
        color: #1565c0;
      }
    }
    
    .rating-stars {
      display: flex;
      align-items: center;
      
      mat-icon {
        color: #ffc107;
        font-size: 18px;
        width: 18px;
        height: 18px;
        line-height: 18px;
      }
      
      .rating-value {
        margin-left: 6px;
        font-weight: 500;
      }
    }
  }
  
  .substitute-records-section {
    h3 {
      margin-top: 0;
      color: #1a3a6d;
      font-weight: 500;
    }
    
    .empty-state {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 40px 0;
      background-color: #f5f7fa;
      border-radius: 8px;
      
      mat-icon {
        font-size: 48px;
        height: 48px;
        width: 48px;
        margin-bottom: 16px;
        color: #9e9e9e;
      }
      
      p {
        margin-bottom: 16px;
        color: #5a6a85;
      }
    }
  }
  
  // 绩效详情标签页样式
  .performance-summary {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
    
    .summary-card {
      background-color: white;
      border-radius: 8px;
      padding: 20px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
      
      .summary-title {
        color: #5a6a85;
        font-size: 14px;
        margin-bottom: 12px;
      }
      
      .summary-value {
        font-size: 28px;
        font-weight: 500;
        margin-bottom: 12px;
        display: flex;
        align-items: center;
        
        .trend-icon {
          margin-left: 8px;
          font-size: 20px;
          
          &.up {
            color: #4caf50;
          }
          
          &.down {
            color: #f44336;
          }
          
          &.flat {
            color: #9e9e9e;
          }
        }
      }
    }
  }
  
  .performance-comparison {
    margin-bottom: 30px;
    
    h3 {
      margin-top: 0;
      color: #1a3a6d;
      font-weight: 500;
      margin-bottom: 16px;
    }
    
    .comparison-chart {
      background-color: white;
      border-radius: 8px;
      padding: 20px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
      
      .chart-placeholder {
        height: 250px;
        display: flex;
        justify-content: center;
        
        .chart-bars {
          display: flex;
          align-items: flex-end;
          height: 100%;
          width: 100%;
          max-width: 600px;
          padding-top: 20px;
          
          .chart-bar {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            height: 100%;
            
            .bar-label {
              text-align: center;
              font-size: 14px;
              color: #5a6a85;
              margin-bottom: 10px;
              font-weight: 500;
            }
            
            .bar-container {
              height: 70%;
              width: 60px;
              position: relative;
              display: flex;
              justify-content: center;
              
              .bar {
                width: 24px;
                position: absolute;
                bottom: 0;
                border-radius: 4px 4px 0 0;
                
                &.designer-bar {
                  background-color: #1a3a6d;
                  left: 8px;
                }
                
                &.average-bar {
                  background-color: #90caf9;
                  right: 8px;
                }
              }
            }
            
            .bar-legend {
              display: flex;
              gap: 12px;
              margin-top: 12px;
              
              .legend-item {
                display: flex;
                align-items: center;
                font-size: 12px;
                
                .legend-color {
                  display: inline-block;
                  width: 12px;
                  height: 12px;
                  margin-right: 4px;
                  border-radius: 2px;
                  
                  &.designer {
                    background-color: #1a3a6d;
                  }
                  
                  &.average {
                    background-color: #90caf9;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
  
  .performance-details {
    margin-bottom: 30px;
    
    h3 {
      margin-top: 0;
      color: #1a3a6d;
      font-weight: 500;
      margin-bottom: 16px;
    }
    
    .performance-table {
      width: 100%;
      box-shadow: none;
      border: 1px solid #eee;
      border-radius: 8px;
      overflow: hidden;
      
      .mat-mdc-header-row {
        background-color: #f5f7fa;
      }
      
      .mat-mdc-row {
        &:hover {
          background-color: #f5f7fa;
        }
      }
      
      .grade-badge {
        padding: 4px 10px;
        border-radius: 4px;
        color: white;
        font-size: 13px;
      }
    }
  }
  
  .promotion-history {
    h3 {
      margin-top: 0;
      color: #1a3a6d;
      font-weight: 500;
      margin-bottom: 16px;
    }
    
    .timeline {
      position: relative;
      padding-left: 30px;
      
      &:before {
        content: '';
        position: absolute;
        left: 7px;
        top: 0;
        height: 100%;
        width: 2px;
        background-color: #e0e0e0;
      }
      
      .timeline-item {
        position: relative;
        padding-bottom: 30px;
        
        &:last-child {
          padding-bottom: 0;
        }
        
        .timeline-point {
          position: absolute;
          left: -30px;
          top: 0;
          width: 16px;
          height: 16px;
          border-radius: 50%;
          background-color: #1a3a6d;
          border: 3px solid white;
          box-shadow: 0 0 0 1px #e0e0e0;
        }
        
        .timeline-content {
          background-color: white;
          border-radius: 8px;
          padding: 16px;
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
          
          .timeline-date {
            color: #5a6a85;
            font-size: 14px;
            margin-bottom: 8px;
          }
          
          .timeline-title {
            font-weight: 500;
            font-size: 16px;
            margin-bottom: 8px;
            color: #1a3a6d;
          }
          
          .timeline-description {
            color: #5a6a85;
          }
        }
      }
    }
  }
}

.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  
  p {
    margin-top: 16px;
    color: #5a6a85;
  }
}

// 作品集预览对话框样式
.portfolio-preview-dialog {
  .mat-mdc-dialog-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0;
    
    h2 {
      margin: 0;
    }
  }
  
  .mat-mdc-dialog-content {
    padding-top: 20px;
    
    .portfolio-image {
      width: 100%;
      border-radius: 8px;
      margin-bottom: 16px;
    }
    
    .portfolio-info {
      .info-row {
        display: flex;
        margin-bottom: 12px;
        
        .info-label {
          width: 100px;
          font-weight: 500;
          color: #5a6a85;
        }
        
        .info-value {
          flex: 1;
        }
        
        .rating-stars {
          display: flex;
          
          mat-icon {
            color: #ffc107;
          }
        }
      }
    }
  }
}

// 添加动画关键帧
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

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

// 卡片悬停效果
.info-card, .summary-card, .timeline-content {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  
  &:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
  }
}

// 按钮悬停效果
button.mat-mdc-button, button.mat-mdc-stroked-button, button.mat-mdc-raised-button {
  transition: all 0.2s ease;
  
  &:hover {
    transform: translateY(-2px);
  }
}

// 响应式调整
@media (max-width: 768px) {
  .designer-profile-container {
    .profile-header {
      .header-content {
        flex-direction: column;
        align-items: flex-start;
        
        .avatar-section {
          margin-right: 0;
          margin-bottom: 16px;
        }
        
        .action-section {
          margin-left: 0;
          margin-top: 16px;
          width: 100%;
          
          button {
            width: 100%;
          }
        }
      }
    }
    
    .info-grid {
      grid-template-columns: 1fr;
    }
    
    .performance-summary {
      grid-template-columns: 1fr;
    }
  }
}

// 简历初筛卡片样式
.screening-card {
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;

    h3 {
      margin: 0;
      font-size: 16px;
      font-weight: 500;
      color: #1a3a6e;
    }

    .edit-actions {
      display: flex;
      gap: 8px;

      .mat-mdc-button {
        min-width: auto;
        padding: 0 12px;
        height: 32px;
        font-size: 13px;
      }
    }
  }

  .screening-content {
    .info-section {
      margin-bottom: 20px;

      .section-title {
        font-size: 14px;
        font-weight: 500;
        color: #1a3a6e;
        margin-bottom: 8px;
        display: flex;
        align-items: center;
        gap: 6px;

        mat-icon {
          font-size: 16px;
          width: 16px;
          height: 16px;
          color: #666;
        }
      }

      .info-content {
        padding-left: 22px;
        color: #666;
        font-size: 13px;
        line-height: 1.5;

        .info-item {
          margin-bottom: 4px;

          .label {
            font-weight: 500;
            color: #333;
            margin-right: 8px;
          }
        }

        .skills-list {
          display: flex;
          flex-wrap: wrap;
          gap: 6px;
          margin-top: 4px;

          .skill-chip {
            background-color: #e6f7ff;
            color: #1a3a6e;
            padding: 2px 8px;
            border-radius: 12px;
            font-size: 12px;
          }
        }
      }
    }

    .result-section {
      border-top: 1px solid #f0f0f0;
      padding-top: 16px;

      .status-display {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 8px;

        .status-icon {
          font-size: 18px;
          width: 18px;
          height: 18px;

          &.status-pass {
            color: #52c41a;
          }

          &.status-reject {
            color: #ff4d4f;
          }

          &.status-pending {
            color: #faad14;
          }
        }

        .status-text {
          font-weight: 500;
          font-size: 14px;

          &.status-pass {
            color: #52c41a;
          }

          &.status-reject {
            color: #ff4d4f;
          }

          &.status-pending {
            color: #faad14;
          }
        }
      }

      .comment-text {
        color: #666;
        font-size: 13px;
        line-height: 1.5;
        margin-top: 8px;
        padding: 8px 12px;
        background-color: #f8f9fa;
        border-radius: 6px;
        border-left: 3px solid #e6f7ff;
      }
    }
  }

  .screening-form {
    .form-row {
      display: flex;
      gap: 16px;
      margin-bottom: 16px;

      .form-field {
        flex: 1;

        .mat-mdc-form-field {
          width: 100%;
        }
      }
    }

    .status-toggle {
      margin-bottom: 16px;

      .mat-button-toggle-group {
        border: 1px solid #d9d9d9;
        border-radius: 6px;
        overflow: hidden;

        .mat-button-toggle {
          border: none;
          font-size: 13px;
          padding: 0 16px;
          height: 36px;

          &.mat-button-toggle-checked {
            background-color: #1a3a6e;
            color: white;

            &:hover {
              background-color: #1a3a6e;
            }
          }

          &:not(.mat-button-toggle-checked) {
            background-color: white;
            color: #666;

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

    .form-actions {
      display: flex;
      justify-content: flex-end;
      gap: 8px;
      margin-top: 16px;
      padding-top: 16px;
      border-top: 1px solid #f0f0f0;

      .mat-mdc-button {
        min-width: 80px;
        height: 36px;
        font-size: 13px;
      }
    }
  }
}

// 状态样式
.status-pass {
  color: #52c41a !important;
}

.status-reject {
  color: #ff4d4f !important;
}

.status-pending {
  color: #faad14 !important;
}

/* 修复Material图标字体和奇怪字符问题 */
mat-icon {
  font-family: 'Material Icons' !important;
  font-feature-settings: 'liga' 1;
  -webkit-font-feature-settings: 'liga';
  -moz-font-feature-settings: 'liga';
  font-variant-ligatures: common-ligatures;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: inherit;
  line-height: inherit;
  vertical-align: middle;
  
  &::before {
    content: none !important;
  }
}

/* 统一按钮图标与文字对齐 */
button mat-icon {
  font-size: 18px !important;
  width: 18px !important;
  height: 18px !important;
  line-height: 18px !important;
  vertical-align: middle;
}

/* 信息项图标特殊处理 */
.info-item mat-icon {
  font-size: 18px !important;
  width: 18px !important;
  height: 18px !important;
  line-height: 18px !important;
  margin-right: 6px;
  color: #5a6a85;
}

/* 趋势图标优化 */
.trend-icon {
  font-size: 16px !important;
  width: 16px !important;
  height: 16px !important;
  line-height: 16px !important;
  
  &.trending_up {
    color: #4caf50;
  }
  
  &.trending_down {
    color: #f44336;
  }
  
  &.trending_flat {
    color: #ff9800;
  }
}

/* 评级星星图标优化 */
.rating-stars mat-icon {
  font-size: 16px !important;
  width: 16px !important;
  height: 16px !important;
  line-height: 16px !important;
  color: #ffc107;
}

/* 表格操作按钮图标优化 */
.mat-table mat-icon {
  font-size: 16px !important;
  width: 16px !important;
  height: 16px !important;
  line-height: 16px !important;
}

/* 卡片头像图标优化 */
mat-card-avatar mat-icon {
  font-size: 24px !important;
  width: 24px !important;
  height: 24px !important;
  line-height: 24px !important;
}