flare-ui/src/app/components/projects/projects.component.scss

.projects-container {
  height: 100%;
  display: flex;
  flex-direction: column;

  .toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 16px;

    .toolbar-left h2 { 
      margin: 0; 
      font-size: 24px; 
      font-weight: 400; 
    }
    
    .toolbar-right {
      display: flex;
      gap: 16px;
      align-items: center;
      
      .search-field { 
        width: 300px;
        
        ::ng-deep {
          .mat-mdc-text-field-wrapper {
            background-color: white;
          }
          
          .mat-mdc-form-field-subscript-wrapper {
            display: none;
          }
        }
      }
      
      .view-toggle { 
        background-color: white;
        border: 1px solid #e0e0e0; 
        border-radius: 4px;
        overflow: hidden;
        
        ::ng-deep {
          .mat-button-toggle-group {
            border: none;
          }
          
          .mat-button-toggle {
            border: none;
            
            &.mat-button-toggle-checked {
              background-color: #e3f2fd;
              
              .mat-icon {
                color: #1976d2;
              }
            }
          }
          
          .mat-icon {
            font-size: 20px;
            width: 20px;
            height: 20px;
            line-height: 20px;
          }
        }
      }
      
      ::ng-deep .mat-mdc-checkbox {
        .mdc-form-field {
          font-size: 14px;
          color: #666;
        }
      }
    }
  }

  mat-progress-bar { 
    margin-bottom: 20px; 
  }
  
  .content { 
    flex: 1; 
    overflow: auto; 
  }

  .projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 20px;
    padding-bottom: 20px;

    .project-card {
      transition: all 0.3s ease;
      cursor: pointer;
      
      &:hover { 
        transform: translateY(-2px); 
        box-shadow: 0 4px 8px rgba(0,0,0,0.15); 
      }
      
      &.disabled { 
        opacity: 0.7; 
        
        .project-icon { 
          background-color: #999 !important; 
        } 
      }
      
      &.deleted { 
        opacity: 0.5; 
        background-color: #fafafa; 
      }

      .project-icon {
        background-color: #3f51b5;
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        
        mat-icon { 
          font-size: 24px; 
          width: 24px; 
          height: 24px; 
        }
      }

      mat-card-title { 
        font-size: 18px; 
        font-weight: 500; 
      }
      
      mat-card-subtitle { 
        margin-top: 4px; 
      }

      .project-info {
        margin-top: 16px;
        
        .info-item {
          display: flex;
          align-items: center;
          gap: 8px;
          margin-bottom: 8px;
          color: #666;
          
          mat-icon { 
            font-size: 18px; 
            width: 18px; 
            height: 18px; 
            color: #999; 
          }
          
          span { 
            font-size: 14px; 
          }
        }
      }

      mat-card-actions {
        padding: 8px 16px;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 8px;
        
        button {
          &:last-child { 
            margin-left: auto; 
          }
        }
      }
    }
  }

  .table-container {
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    overflow: hidden;

    .projects-table {
      width: 100%;
      
      .deleted-icon { 
        color: #f44336; 
        font-size: 16px; 
        vertical-align: middle; 
        margin-left: 8px; 
      }
      
      .deleted-row { 
        opacity: 0.5; 
        background-color: #fafafa; 
      }
      
      ::ng-deep {
        .mat-mdc-chip-set {
          display: inline-flex;
          min-height: auto;
        }
        
        .mat-mdc-chip {
          font-size: 12px;
          min-height: 24px;
          padding: 4px 12px;
          margin: 2px;
        }
      }
    }
  }

  .no-data {
    text-align: center;
    padding: 60px 20px;
    color: #999;
    background: white;
    border-radius: 8px;
    
    mat-icon { 
      font-size: 64px; 
      height: 64px; 
      width: 64px; 
      margin-bottom: 16px; 
      color: #e0e0e0; 
    }
    
    p { 
      font-size: 16px; 
      margin: 0 0 24px 0; 
    }
  }

  .message-container {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;

    mat-card {
      min-width: 300px;
      
      &.success mat-card-content { 
        color: #4caf50; 
      }
      
      &.error mat-card-content { 
        color: #f44336; 
      }
      
      mat-card-content {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 12px 16px;
        margin: 0;
        
        mat-icon { 
          font-size: 20px; 
          width: 20px; 
          height: 20px; 
        }
      }
    }
  }
}

// Material overrides for this component
::ng-deep {
  .mat-mdc-button-toggle-appearance-standard .mat-button-toggle-label-content {
    line-height: 36px;
    padding: 0 12px;
  }
  
  .mat-mdc-form-field-appearance-outline .mat-mdc-form-field-infix {
    padding: 12px 0;
  }
  
  .mat-mdc-text-field-wrapper.mdc-text-field--outlined {
    .mat-mdc-form-field-infix {
      min-height: auto;
    }
  }
  
  .mat-mdc-card {
    --mdc-elevated-card-container-color: white;
    --mdc-elevated-card-container-elevation: 0 2px 4px rgba(0,0,0,0.1);
  }
}

// Responsive adjustments
@media (max-width: 768px) {
  .projects-container {
    .toolbar {
      .toolbar-left, .toolbar-right { 
        width: 100%; 
        justify-content: center; 
      }
      
      .search-field { 
        width: 100%; 
      }
    }
    
    .projects-grid { 
      grid-template-columns: 1fr; 
    }
  }
}