yss-project/src/app/pages/hr/dashboard/dashboard.scss

.hr-dashboard-container {
  padding: 20px;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  min-height: 100vh;
  font-family: 'Roboto', sans-serif;

  .top-navigation {
    margin-bottom: 30px;
    
    .nav-buttons {
      display: flex;
      gap: 15px;
      justify-content: center;
      flex-wrap: wrap;
      
      .nav-button {
        padding: 12px 24px;
        border-radius: 25px;
        font-weight: 500;
        transition: all 0.3s ease;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
        
        &:hover {
          transform: translateY(-2px);
          box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
        }
        
        &.active {
          background: linear-gradient(45deg, #2196F3, #21CBF3);
          color: white;
          box-shadow: 0 6px 20px rgba(33, 150, 243, 0.3);
        }
        
        mat-icon {
          margin-right: 8px;
        }
      }
    }
  }

  // 数据可视化页面样式
  .visualization-page {
    .main-layout {
      display: grid;
      grid-template-columns: 2fr 1fr;
      gap: 30px;
      min-height: 80vh;

      @media (max-width: 1200px) {
        grid-template-columns: 1fr;
        gap: 20px;
      }
    }

    .left-panel {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 20px;
      
      @media (max-width: 768px) {
        grid-template-columns: 1fr;
      }

      .chart-card {
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(10px);
        border-radius: 20px;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
        transition: all 0.3s ease;
        border: 1px solid rgba(255, 255, 255, 0.2);

        &:hover {
          transform: translateY(-5px);
          box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
        }

        mat-card-header {
          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
          color: white;
          border-radius: 20px 20px 0 0;
          padding: 20px;

          mat-card-title {
            display: flex;
            align-items: center;
            font-size: 18px;
            font-weight: 600;
            margin: 0;

            mat-icon {
              margin-right: 10px;
              font-size: 24px;
            }
          }

          mat-card-subtitle {
            color: rgba(255, 255, 255, 0.8);
            margin-top: 5px;
          }
        }

        mat-card-content {
          padding: 25px;
        }
      }

      // 职级分布饼图样式
      .pie-chart-container {
        height: 200px;
        margin-bottom: 20px;
        background: radial-gradient(circle, #f8f9fa 0%, #e9ecef 100%);
        border-radius: 15px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        color: #666;
      }

      .chart-legend {
        display: flex;
        flex-direction: column;
        gap: 10px;

        .legend-item {
          display: flex;
          align-items: center;
          gap: 10px;
          font-size: 14px;

          .legend-color {
            width: 16px;
            height: 16px;
            border-radius: 50%;
            
            &.junior { background: #4CAF50; }
            &.intermediate { background: #FF9800; }
            &.senior { background: #2196F3; }
          }
        }
      }

      // 折线图样式
      .line-chart-container {
        height: 200px;
        margin-bottom: 20px;
        background: radial-gradient(circle, #f8f9fa 0%, #e9ecef 100%);
        border-radius: 15px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        color: #666;
      }

      .key-notes {
        h4 {
          color: #333;
          font-size: 16px;
          margin-bottom: 15px;
          font-weight: 600;
        }

        .note-item {
          display: flex;
          align-items: center;
          gap: 10px;
          margin-bottom: 10px;
          padding: 10px;
          background: rgba(33, 150, 243, 0.1);
          border-radius: 10px;
          border-left: 4px solid #2196F3;

          .note-icon {
            color: #2196F3;
            font-size: 18px;
          }

          .note-text {
            font-size: 14px;
            color: #555;
          }
        }
      }

      // 雷达图样式
      .radar-chart-container {
        height: 200px;
        margin-bottom: 20px;
        background: radial-gradient(circle, #f8f9fa 0%, #e9ecef 100%);
        border-radius: 15px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        color: #666;
      }

      .radar-legend {
        display: flex;
        flex-wrap: wrap;
        gap: 15px;

        .legend-item {
          display: flex;
          align-items: center;
          gap: 8px;
          font-size: 14px;

          .legend-color {
            width: 16px;
            height: 16px;
            border-radius: 50%;
          }
        }
      }

      // 空缺岗位样式
      .vacancy-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 15px;

        .vacancy-item {
          padding: 15px;
          border-radius: 12px;
          border-left: 4px solid;
          transition: all 0.3s ease;

          &.urgent {
            background: rgba(244, 67, 54, 0.1);
            border-left-color: #f44336;
          }

          &.normal {
            background: rgba(76, 175, 80, 0.1);
            border-left-color: #4caf50;
          }

          &:hover {
            transform: translateX(5px);
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
          }

          .vacancy-header {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 8px;

            mat-icon {
              font-size: 20px;
            }

            .position-name {
              font-weight: 600;
              color: #333;
            }
          }

          .vacancy-count {
            font-size: 18px;
            font-weight: 700;
            color: #2196F3;
            margin-bottom: 5px;
          }

          .vacancy-duration {
            font-size: 12px;
            color: #666;
          }
        }
      }
    }

    .right-panel {
      .todo-card {
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(10px);
        border-radius: 20px;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
        border: 1px solid rgba(255, 255, 255, 0.2);
        height: fit-content;

        mat-card-header {
          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
          color: white;
          border-radius: 20px 20px 0 0;
          padding: 20px;

          .todo-toggle-btn {
            width: 100%;
            background: rgba(255, 255, 255, 0.2);
            color: white;
            border: 1px solid rgba(255, 255, 255, 0.3);
            border-radius: 15px;
            padding: 15px 20px;
            font-size: 16px;
            font-weight: 600;
            transition: all 0.3s ease;

            &:hover {
              background: rgba(255, 255, 255, 0.3);
              transform: scale(1.02);
            }

            mat-icon {
              margin-right: 10px;
            }

            .todo-count-chip {
              margin-left: 10px;
              background: rgba(255, 255, 255, 0.9);
              color: #333;
              font-weight: 700;
            }
          }
        }

        mat-card-content {
          padding: 0;
        }

        .todo-list {
          max-height: 600px;
          overflow-y: auto;

          .todo-item {
            border-bottom: 1px solid rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease;

            &:hover {
              background: rgba(33, 150, 243, 0.05);
            }

            &:last-child {
              border-bottom: none;
            }

            &.priority-high {
              border-left: 4px solid #f44336;
            }

            &.priority-medium {
              border-left: 4px solid #ff9800;
            }

            &.priority-low {
              border-left: 4px solid #4caf50;
            }

            .todo-content {
              padding: 20px;

              .todo-header-row {
                display: flex;
                align-items: flex-start;
                gap: 15px;

                .todo-priority-indicator {
                  width: 8px;
                  height: 8px;
                  border-radius: 50%;
                  margin-top: 8px;
                  flex-shrink: 0;
                }

                .todo-main {
                  flex: 1;
                  display: flex;
                  justify-content: space-between;
                  align-items: flex-start;

                  .todo-actions {
                    display: flex;
                    gap: 15px;
                    flex: 1;

                    .todo-info {
                      flex: 1;

                      .todo-title {
                        margin: 0 0 8px 0;
                        font-size: 16px;
                        font-weight: 600;
                        color: #333;
                        transition: all 0.3s ease;

                        &.completed {
                          text-decoration: line-through;
                          color: #999;
                        }
                      }

                      .todo-description {
                        margin: 0 0 12px 0;
                        font-size: 14px;
                        color: #666;
                        line-height: 1.4;
                      }

                      .todo-meta {
                        display: flex;
                        gap: 8px;
                        flex-wrap: wrap;

                        .priority-chip {
                          color: white;
                          font-size: 12px;
                          font-weight: 600;
                          padding: 4px 8px;
                          border-radius: 12px;
                        }

                        .type-chip {
                          background: rgba(33, 150, 243, 0.1);
                          color: #2196F3;
                          font-size: 12px;
                          font-weight: 500;
                          padding: 4px 8px;
                          border-radius: 12px;
                        }
                      }
                    }
                  }

                  .drag-handle {
                    color: #ccc;
                    cursor: grab;
                    padding: 5px;
                    border-radius: 5px;
                    transition: all 0.3s ease;

                    &:hover {
                      color: #999;
                      background: rgba(0, 0, 0, 0.05);
                    }

                    &:active {
                      cursor: grabbing;
                    }
                  }
                }
              }
            }
          }
        }
      }

      // 关键岗位空缺样式
      .vacancy-list {
        .vacancy-item {
          display: flex;
          align-items: center;
          padding: 16px;
          margin-bottom: 12px;
          border-radius: 8px;
          background: #fafafa;
          border-left: 4px solid #e0e0e0;
          transition: all 0.3s ease;
          
          &:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
          }
          
          &.priority-high {
            border-left-color: #f44336;
            background: #ffebee;
          }
          
          &.priority-medium {
            border-left-color: #ff9800;
            background: #fff3e0;
          }
          
          &.priority-low {
            border-left-color: #4caf50;
            background: #e8f5e8;
          }
          
          .vacancy-icon {
            margin-right: 16px;
            
            mat-icon {
              font-size: 32px;
              width: 32px;
              height: 32px;
              color: #666;
            }
          }
          
          .vacancy-info {
            flex: 1;
            
            h4 {
              margin: 0 0 8px 0;
              font-size: 16px;
              font-weight: 500;
              color: #333;
            }
            
            p {
              margin: 0 0 8px 0;
              color: #666;
              font-size: 14px;
            }
            
            .priority-badge {
              padding: 4px 8px;
              border-radius: 12px;
              font-size: 12px;
              font-weight: 500;
              
              &.priority-high {
                background: #ffcdd2;
                color: #c62828;
              }
              
              &.priority-medium {
                background: #ffe0b2;
                color: #ef6c00;
              }
              
              &.priority-low {
                background: #c8e6c9;
                color: #2e7d32;
              }
            }
          }
        }
      }
    }
  }

  // 职级与晋升管理页面样式
  .promotion-page {
    .content-layout {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 30px;

      @media (max-width: 1200px) {
        grid-template-columns: 1fr;
      }
    }

    .rules-card, .performance-card {
      background: rgba(255, 255, 255, 0.95);
      backdrop-filter: blur(10px);
      border-radius: 20px;
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
      border: 1px solid rgba(255, 255, 255, 0.2);

      mat-card-header {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        border-radius: 20px 20px 0 0;
        padding: 20px;

        mat-card-title {
          display: flex;
          align-items: center;
          font-size: 18px;
          font-weight: 600;
          margin: 0;

          mat-icon {
            margin-right: 10px;
          }
        }
      }

      mat-card-content {
        padding: 25px;
      }
    }

    .rule-item {
      margin-bottom: 25px;
      padding: 20px;
      background: rgba(33, 150, 243, 0.05);
      border-radius: 15px;
      border-left: 4px solid #2196F3;

      .rule-title {
        color: #333;
        font-size: 16px;
        font-weight: 600;
        margin-bottom: 10px;
      }

      .rule-description {
        color: #666;
        font-size: 14px;
        margin-bottom: 15px;
        line-height: 1.5;
      }

      .rule-conditions {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;

        .condition-chip {
          background: rgba(76, 175, 80, 0.1);
          color: #4caf50;
          font-size: 12px;
          padding: 6px 12px;
          border-radius: 15px;
          border: 1px solid rgba(76, 175, 80, 0.3);
        }
      }
    }

    .dept-performance-item {
      margin-bottom: 25px;
      padding: 20px;
      background: rgba(255, 255, 255, 0.8);
      border-radius: 15px;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);

      .dept-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;

        .dept-name {
          color: #333;
          font-size: 18px;
          font-weight: 600;
          margin: 0;
        }

        .overall-score {
          background: linear-gradient(45deg, #4CAF50, #8BC34A);
          color: white;
          padding: 8px 16px;
          border-radius: 20px;
          font-weight: 700;
          font-size: 16px;
        }
      }

      .performance-metrics {
        .metric {
          display: flex;
          align-items: center;
          gap: 15px;
          margin-bottom: 15px;

          .metric-label {
            min-width: 100px;
            font-size: 14px;
            color: #666;
            font-weight: 500;
          }

          mat-progress-bar {
            flex: 1;
            height: 8px;
            border-radius: 4px;
          }

          .metric-value {
            min-width: 50px;
            text-align: right;
            font-weight: 600;
            color: #333;
          }
        }
      }
    }
  }

  // 新人跟进管理页面样式
  .onboarding-page {
    .content-layout {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 30px;

      @media (max-width: 1200px) {
        grid-template-columns: 1fr;
      }
    }

    .newbie-card, .checkpoint-card {
      background: rgba(255, 255, 255, 0.95);
      backdrop-filter: blur(10px);
      border-radius: 20px;
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
      border: 1px solid rgba(255, 255, 255, 0.2);

      mat-card-header {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        border-radius: 20px 20px 0 0;
        padding: 20px;

        mat-card-title {
          display: flex;
          align-items: center;
          font-size: 18px;
          font-weight: 600;
          margin: 0;

          mat-icon {
            margin-right: 10px;
          }
        }
      }

      mat-card-content {
        padding: 25px;
      }
    }

    .newbie-item {
      display: flex;
      align-items: center;
      gap: 15px;
      padding: 15px;
      margin-bottom: 15px;
      background: rgba(33, 150, 243, 0.05);
      border-radius: 15px;
      transition: all 0.3s ease;

      &:hover {
        background: rgba(33, 150, 243, 0.1);
        transform: translateX(5px);
      }

      .newbie-avatar {
        width: 50px;
        height: 50px;
        background: linear-gradient(45deg, #2196F3, #21CBF3);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;

        mat-icon {
          font-size: 24px;
        }
      }

      .newbie-info {
        flex: 1;

        .newbie-name {
          margin: 0 0 5px 0;
          font-size: 16px;
          font-weight: 600;
          color: #333;
        }

        .newbie-position {
          margin: 0 0 5px 0;
          font-size: 14px;
          color: #666;
        }

        .newbie-date {
          margin: 0;
          font-size: 12px;
          color: #999;
        }
      }

      .newbie-progress {
        display: flex;
        align-items: center;
        gap: 10px;
        min-width: 120px;

        mat-progress-bar {
          flex: 1;
          height: 6px;
          border-radius: 3px;
        }

        .progress-text {
          font-size: 14px;
          font-weight: 600;
          color: #333;
        }
      }
    }

    .checkpoint-item {
      display: flex;
      gap: 15px;
      padding: 15px;
      margin-bottom: 15px;
      background: rgba(76, 175, 80, 0.05);
      border-radius: 15px;
      border-left: 4px solid #4caf50;

      .checkpoint-content {
        flex: 1;

        .checkpoint-title {
          margin: 0 0 8px 0;
          font-size: 16px;
          font-weight: 600;
          color: #333;
        }

        .checkpoint-description {
          margin: 0 0 10px 0;
          font-size: 14px;
          color: #666;
          line-height: 1.4;
        }

        .checkpoint-timeline {
          display: flex;
          align-items: center;
          gap: 5px;
          font-size: 12px;
          color: #999;

          mat-icon {
            font-size: 16px;
          }
        }
      }
    }
  }

  // 响应式设计
  @media (max-width: 768px) {
    padding: 15px;

    .top-navigation {
      margin-bottom: 20px;

      .nav-buttons {
        .nav-button {
          padding: 10px 16px;
          font-size: 14px;
        }
      }
    }

    .visualization-page {
      .main-layout {
        gap: 15px;
      }

      .left-panel {
        gap: 15px;

        .chart-card {
          mat-card-header {
            padding: 15px;

            mat-card-title {
              font-size: 16px;
            }
          }

          mat-card-content {
            padding: 15px;
          }
        }
      }
    }
  }

  // 滚动条样式
  ::-webkit-scrollbar {
    width: 8px;
  }

  ::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1);
    border-radius: 4px;
  }

  ::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 4px;

    &:hover {
      background: rgba(0, 0, 0, 0.5);
    }
  }
}