@import "/src/assets/scss/modern-variables.scss";
@import "/src/assets/scss/fonts.scss";

.dashboard-projects-container {
  padding: 1.5rem;
  background: #FAFBFC;
  min-height: 100%;
  font-family: 'Nominee-regular', sans-serif;
}

// En-tête Dashboard
.dashboard-header {
  background: white;
  border-radius: 8px;
  padding: 2rem;
  margin-bottom: 2rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  
  .header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .title-section {
    display: flex;
    align-items: center;
    gap: 1rem;
    
    .dashboard-icon {
      font-size: 2.5rem;
      color: #4AA8DC;
    }
    
    .title-text h1 {
      margin: 0;
      font-size: 1.75rem;
      font-weight: 600;
      color: #111827;
      font-family: 'Nominee-Medium', sans-serif;
    }
    
    .subtitle {
      margin: 0.25rem 0 0 0;
      color: #6B7280;
      font-size: 0.9rem;
    }
  }
  
  .header-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
    
    .active {
      background: rgba(74, 168, 220, 0.1);
      color: #4AA8DC;
    }
  }
}

// Placeholder Section
.placeholder-section {
  background: white;
  border-radius: 8px;
  padding: 4rem 2rem;
  margin-bottom: 2rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  text-align: center;
  
  .placeholder-card {
    max-width: 400px;
    margin: 0 auto;
    
    mat-icon {
      font-size: 4rem;
      color: #9CA3AF;
      margin-bottom: 1rem;
    }
    
    h2 {
      font-size: 1.5rem;
      font-weight: 600;
      color: #111827;
      margin-bottom: 1rem;
      font-family: 'Nominee-Medium', sans-serif;
    }
    
    p {
      color: #6B7280;
      margin-bottom: 0.5rem;
      
      &.note {
        font-style: italic;
        color: #9CA3AF;
        font-size: 0.9rem;
      }
    }
  }
}

// Footer Dashboard
.dashboard-footer {
  background: white;
  border-radius: 8px;
  padding: 1.5rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  
  .footer-content {
    .system-info {
      display: flex;
      gap: 2rem;
      
      .info-item {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        color: #6B7280;
        font-size: 0.9rem;
        
        mat-icon {
          font-size: 1.2rem;
          color: #9CA3AF;
        }
      }
    }
  }
}

// Responsive
@media (max-width: 768px) {
  .dashboard-projects-container {
    padding: 1rem;
  }
  
  .dashboard-header {
    padding: 1.5rem;
    
    .header-content {
      flex-direction: column;
      gap: 1rem;
      align-items: flex-start;
    }
    
    .title-section .dashboard-icon {
      font-size: 2rem;
    }
  }
  
  .placeholder-section {
    padding: 2rem 1rem;
  }
  
  .dashboard-footer .footer-content .system-info {
    flex-direction: column;
    gap: 1rem;
  }
}