.dashboard-container {
  padding: 20px;
}

.page-header {
  margin-bottom: 24px;
  
  h1 {
    margin: 0 0 8px 0;
    font-size: 28px;
    font-weight: 700; /* 提升标题权重以贴近 Admin 风格 */
    background: linear-gradient(135deg, #165DFF, #7c3aed);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }
  
  .page-description {
    margin: 0;
    color: #4E5969; /* 更接近 Admin 次级文字色 */
    font-size: 16px;
  }
}

.filter-bar {
  display: flex;
  align-items: center;
  margin-bottom: 24px;
  background-color: white;
  padding: 12px 16px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  
  .time-filter {
    display: flex;
    align-items: center;
    
    .filter-label {
      margin-right: 12px;
      color: #616161;
    }
    
    .filter-buttons {
      display: flex;
      
      button {
        min-width: 40px;
        border-radius: 4px;
        margin-right: 8px;
        
        &.active {
          background-color: #1a3a6e;
          color: white;
        }
      }
    }
  }
}

.dashboard-content {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  
  @media (min-width: 1200px) {
    grid-template-columns: repeat(2, 1fr);
    
    .dashboard-card:last-child {
      grid-column: span 2;
    }
  }
}

.dashboard-card {
  border-radius: 12px; /* 统一圆角 */
  background: #FFFFFF;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06); /* $shadow-sm */
  border: 1px solid rgba(229, 230, 235, 0.8);
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  
  mat-card-header {
    background-color: #FFFFFF; /* 与 Admin 统一 */
    padding: 16px 20px;
    border-bottom: 1px solid #E5E6EB;
  }
  
  .chart-container {
    width: 100%;
    height: 320px;
  }
  
  .card-title-container {
    display: flex;
    align-items: center;
    
    mat-icon {
      margin-right: 10px;
      color: #165DFF; /* 主色调 */
    }
    
    span {
      font-size: 18px;
      font-weight: 600;
      color: #1D2129; /* 标题主文字色 */
    }
  }
  
  mat-card-content {
    padding: 20px;
  }
  
  &:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); /* $shadow-md */
    transform: translateY(-4px);
    border-color: rgba(22, 93, 255, 0.3);
  }
}

.card-section {
  margin-bottom: 24px;
  
  &:last-child {
    margin-bottom: 0;
  }
  
  h3 {
    margin: 0 0 16px 0;
    font-size: 16px;
    font-weight: 600;
    color: #4E5969;
    border-left: 4px solid #165DFF; /* 与 Admin 主色一致 */
    padding-left: 8px;
  }
  
  h4 {
    margin: 16px 0 8px 0;
    font-size: 14px;
    font-weight: 500;
    color: #616161;
  }
}

/* 入职离职看板样式 */
.data-visualization {
  display: flex;
  flex-direction: column;
  height: 200px;
  
  .chart-placeholder {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    height: 160px;
    margin-bottom: 16px;
    
    .chart-bar-container {
      display: flex;
      flex-direction: column;
      align-items: center;
      flex: 1;
      
      .chart-label {
        margin-top: 8px;
        font-size: 12px;
        color: #757575;
      }
      
      .chart-bars {
        display: flex;
        align-items: flex-end;
        height: 100%;
        width: 100%;
        justify-content: center;
        gap: 4px;
        
        .chart-bar {
          width: 20px;
          position: relative;
          border-radius: 4px 4px 0 0;
          
          &.hired {
            background-color: #4caf50;
          }
          
          &.resigned {
            background-color: #f44336;
          }
          
          .bar-value {
            position: absolute;
            top: -20px;
            left: 50%;
            transform: translateX(-50%);
            font-size: 12px;
            color: #616161;
          }
        }
      }
    }
  }
  
  .chart-legend {
    display: flex;
    justify-content: center;
    gap: 16px;
    
    .legend-item {
      display: flex;
      align-items: center;
      
      .legend-color {
        width: 12px;
        height: 12px;
        margin-right: 4px;
        border-radius: 2px;
        
        &.hired {
          background-color: #4caf50;
        }
        
        &.resigned {
          background-color: #f44336;
        }
        
        &.top-tier {
          background-color: #4caf50;
        }
        
        &.mid-tier {
          background-color: #2196f3;
        }
        
        &.bottom-tier {
          background-color: #f44336;
        }
      }
      
      span {
        font-size: 12px;
        color: #616161;
      }
    }
  }
}

.process-tracking {
  display: flex;
  flex-direction: column;
  gap: 16px;
  
  .process-item {
    background-color: #f5f5f5;
    padding: 12px;
    border-radius: 4px;
    
    .process-header {
      display: flex;
      justify-content: space-between;
      margin-bottom: 8px;
      
      .process-title {
        font-weight: 500;
        color: #424242;
      }
      
      .process-count {
        font-weight: 500;
        color: #1a3a6e;
      }
    }
    
    mat-progress-bar {
      margin-bottom: 8px;
    }
    
    .process-action {
      width: 100%;
    }
  }
}

.risk-alerts {
  display: flex;
  flex-direction: column;
  gap: 16px;
  
  .risk-alert {
    background-color: #fff8e1;
    padding: 12px;
    border-radius: 4px;
    border-left: 4px solid #ffc107;
    
    .alert-header {
      display: flex;
      align-items: center;
      margin-bottom: 8px;
      
      mat-icon {
        margin-right: 8px;
        font-size: 20px;
        height: 20px;
        width: 20px;
      }
      
      .alert-title {
        flex: 1;
        font-weight: 500;
        color: #424242;
      }
      
      .alert-count {
        font-weight: 500;
        color: #f44336;
      }
    }
    
    .alert-employees {
      display: flex;
      flex-direction: column;
      gap: 8px;
      
      .employee-item {
        display: flex;
        align-items: center;
        background-color: white;
        padding: 8px;
        border-radius: 4px;
        
        .employee-name {
          font-weight: 500;
          margin-right: 8px;
        }
        
        .employee-position,
        .employee-department {
          color: #757575;
          margin-right: 8px;
          font-size: 12px;
        }
        
        .days-left {
          margin-left: auto;
          background-color: #f44336;
          color: white;
          padding: 2px 6px;
          border-radius: 4px;
          font-size: 12px;
        }
      }
    }
  }
}

/* 绩效总览看板样式 */
.metrics-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
  
  .metric-item {
    .metric-header {
      display: flex;
      justify-content: space-between;
      margin-bottom: 8px;
      
      .metric-name {
        font-weight: 500;
        color: #424242;
      }
      
      .metric-values {
        display: flex;
        gap: 8px;
        
        .metric-actual {
          font-weight: 500;
          color: #1a3a6e;
        }
        
        .metric-target {
          color: #757575;
          font-size: 12px;
        }
      }
    }
  }
}

.department-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 16px;
  
  .table-header {
    display: flex;
    background-color: #f5f5f5;
    font-weight: 500;
    color: #424242;
  }
  
  .table-row {
    display: flex;
    border-bottom: 1px solid #e0e0e0;
    
    &:last-child {
      border-bottom: none;
    }
  }
  
  .table-cell {
    flex: 1;
    padding: 8px;
    text-align: center;
    
    &:first-child {
      text-align: left;
    }
  }
}

.performance-distribution {
  .pie-chart-placeholder {
    display: flex;
    height: 40px;
    border-radius: 20px;
    overflow: hidden;
    margin-bottom: 16px;
    
    .pie-segment {
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      
      &.top-tier {
        background-color: #4caf50;
      }
      
      &.mid-tier {
        background-color: #2196f3;
      }
      
      &.bottom-tier {
        background-color: #f44336;
      }
      
      .segment-label,
      .segment-value {
        color: white;
        font-size: 12px;
        font-weight: 500;
        margin: 0 4px;
      }
    }
  }
}

.penalty-warnings {
  display: flex;
  flex-direction: column;
  gap: 16px;
  
  .warning-item {
    background-color: #f5f5f5;
    padding: 12px;
    border-radius: 4px;
    
    .warning-header {
      display: flex;
      align-items: center;
      margin-bottom: 12px;
      
      mat-icon {
        margin-right: 8px;
        font-size: 20px;
        height: 20px;
        width: 20px;
      }
      
      .warning-issue {
        font-weight: 500;
        color: #424242;
      }
    }
    
    .warning-details {
      display: flex;
      gap: 24px;
      
      .warning-departments,
      .warning-employees {
        flex: 1;
        
        h4 {
          margin-top: 0;
        }
        
        .department-item,
        .employee-item {
          display: flex;
          justify-content: space-between;
          padding: 4px 0;
          
          .department-name,
          .employee-name {
            font-weight: 500;
          }
          
          .department-count,
          .employee-count {
            color: #f44336;
            font-weight: 500;
          }
          
          .employee-department {
            color: #757575;
            font-size: 12px;
            margin-left: 8px;
          }
        }
      }
    }
  }
}

/* 关键数据看板样式 */
.structure-data {
  padding: 16px 0;
  
  .structure-item {
    margin-bottom: 16px;
    
    &:last-child {
      margin-bottom: 0;
    }
    
    .structure-header {
      display: flex;
      justify-content: space-between;
      margin-bottom: 8px;
      
      .structure-name {
        font-weight: 500;
        color: #424242;
      }
      
      .structure-count {
        font-weight: 500;
        color: #1a3a6e;
      }
    }
    
    .structure-percentage {
      display: block;
      text-align: right;
      margin-top: 4px;
      font-size: 12px;
      color: #757575;
    }
  }
}

.movement-trends {
  height: 200px;
  
  .line-chart-placeholder {
    position: relative;
    height: 160px;
    margin-bottom: 16px;
    border-bottom: 1px solid #e0e0e0;
    border-left: 1px solid #e0e0e0;
    
    .chart-lines {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      
      .chart-line {
        position: absolute;
        height: 2px;
        
        &.hired {
          background-color: #4caf50;
          width: 100%;
          top: 30%;
        }
        
        &.resigned {
          background-color: #f44336;
          width: 100%;
          top: 60%;
        }
      }
    }
    
    .chart-points {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      
      .chart-point-group {
        position: absolute;
        bottom: 0;
        transform: translateX(-50%);
        
        .chart-point {
          position: absolute;
          width: 8px;
          height: 8px;
          border-radius: 50%;
          transform: translate(-50%, 50%);
          
          &.hired {
            background-color: #4caf50;
          }
          
          &.resigned {
            background-color: #f44336;
          }
        }
        
        .chart-label {
          position: absolute;
          bottom: -20px;
          left: 50%;
          transform: translateX(-50%);
          font-size: 12px;
          color: #757575;
        }
      }
    }
  }
}

.todo-items {
  display: flex;
  flex-direction: column;
  gap: 12px;
  
  .todo-item {
    background-color: #f5f5f5;
    padding: 12px;
    border-radius: 4px;
    border-left: 4px solid #9e9e9e;
    
    &.priority-high {
      border-left-color: #f44336;
    }
    
    &.priority-medium {
      border-left-color: #ff9800;
    }
    
    &.priority-low {
      border-left-color: #4caf50;
    }
    
    .todo-header {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      margin-bottom: 8px;
      
      .todo-task {
        font-weight: 500;
        color: #424242;
        margin-right: 8px;
      }
    }
    
    .todo-footer {
      display: flex;
      justify-content: space-between;
      
      .todo-due-date {
        font-size: 12px;
        color: #757575;
      }
      
      .todo-priority {
        font-size: 12px;
        font-weight: 500;
        
        .priority-high & {
          color: #f44336;
        }
        
        .priority-medium & {
          color: #ff9800;
        }
        
        .priority-low & {
          color: #4caf50;
        }
      }
    }
  }
}