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

.environment-container {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.main-card {
  mat-card-header {
    margin-bottom: 20px;
    
    mat-card-title {
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 24px;
      
      mat-icon {
        font-size: 28px;
        height: 28px;
        width: 28px;
      }
    }
  }
}

.section {
  padding: 20px 0;
  
  &:first-child {
    padding-top: 0;
  }
}

.section-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  color: #333;
  
  mat-icon {
    color: #1976d2;
  }
}

.full-width {
  width: 100%;
}

.small-field {
  width: 200px;
}

.endpoint-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  
  .endpoint-field {
    flex: 1;
  }
  
  .test-button {
    margin-top: 8px;
    height: 40px;
  }
}

.settings-panel {
  margin: 20px 0;
  
  mat-panel-title {
    display: flex;
    align-items: center;
    gap: 10px;
  }
}

.parameter-config {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 10px 0;
  
  mat-checkbox {
    margin: 10px 0;
  }
}

.stt-settings {
  padding: 10px 0;
}

.settings-row {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
  flex-wrap: wrap;
  
  mat-checkbox {
    margin-top: 10px;
  }
}

.actions {
  display: flex;
  gap: 10px;
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid #e0e0e0;
  
  button {
    mat-icon {
      margin-right: 5px;
    }
  }
}

mat-divider {
  margin: 30px 0;
}

// Material overrides
::ng-deep {
  .mat-mdc-form-field {
    .mat-mdc-text-field-wrapper {
      background-color: #f5f5f5;
    }
    
    &.mat-focused {
      .mat-mdc-text-field-wrapper {
        background-color: #fff;
      }
    }
  }
  
  .mat-expansion-panel {
    box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
    border-radius: 8px !important;
    
    &:not(.mat-expanded) {
      &:hover {
        background-color: #f5f5f5;
      }
    }
  }
}

.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

// Responsive
@media (max-width: 768px) {
  .endpoint-row {
    flex-direction: column;
    
    .test-button {
      width: 100%;
    }
  }
  
  .settings-row {
    flex-direction: column;
    
    .small-field {
      width: 100%;
    }
  }
}