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

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

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

    .toolbar-left {
      display: flex;
      align-items: center;
      gap: 16px;
    }

    .toolbar-right {
      display: flex;
      align-items: center;
      gap: 16px;
    }

    .search-field {
      width: 300px;
    }

    .view-toggle {
      border: 1px solid rgba(0, 0, 0, 0.12);
      border-radius: 4px;
    }
  }

  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;
        border-radius: 50%;
        
        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: 12px;
          color: #666;
          
          &:last-child {
            margin-bottom: 0;
          }
          
          mat-icon { 
            font-size: 18px; 
            width: 18px; 
            height: 18px; 
            color: #999;
            vertical-align: middle;
          }
          
          .info-label {
            font-size: 13px;
            vertical-align: middle;
            line-height: 18px;
          }
          
          mat-checkbox {
            margin-left: 4px;
            vertical-align: middle;
            
            ::ng-deep .mat-mdc-checkbox-touch-target {
              height: 18px;
            }
          }
          
          .time-text {
            font-size: 12px;
            color: #999;
          }
        }
      }
    }
  }

  .projects-table { 
    overflow: auto; 
    
    mat-checkbox {
      vertical-align: middle;
    }
    
    .name-with-icon {
      display: flex;
      align-items: center;
      gap: 8px;
      
      .project-table-icon {
        color: #3f51b5;
        font-size: 20px;
        width: 20px;
        height: 20px;
      }
      
      .deleted-icon {
        margin-left: auto;
        color: #f44336;
      }
    }
    
    .action-buttons {
      display: flex;
      gap: 8px;
      
      button {
        min-width: auto;
      }
    }
  }

  .empty-state {
    text-align: center;
    padding: 60px 20px;
    
    mat-icon { 
      font-size: 64px; 
      width: 64px; 
      height: 64px; 
      color: #ccc; 
      margin-bottom: 16px; 
    }
    
    h3 { 
      color: #666; 
      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; 
    }
  }
}